Chi Design System

Alerts

To show an alert use the class m-alert and add a modifier to specify the type of alert:

  • -banner
  • -bubble
  • -toast
banner
This is a banner example
bubble
This is a banner example
toast
This is a banner example

and also the style of the alert must be specified:

  • -light
  • -success
  • -danger
  • -warning
  • -info
  • -dark
light
This is a light alert
success
This is a success alert
danger
This is a danger alert
warning
This is a warning alert
info
This is a info alert
dark
This is a dark alert

Example

<div class="m-alert -banner -info" data-title="Banner title">
  This is a banner example
</div>

Also can show an icon to emphasize more the type of nature applying the modifier -hasIcon.

light
This is a banner example
success
This is a banner example
danger
This is a banner example
warning
This is a banner example
info
This is a banner example
dark
This is a banner example
<div class="m-alert -banner -info -hasIcon" data-title="Banner title">
  This is a banner example
</div>

A button can be added to force the user to close the alert.

This is a banner example
<div class="m-alert -banner -info -hasIcon" data-title="Banner title">
  This is a banner example
  <button></button>
</div>

Also alerts supports size modifiers:

  • -small
  • -large
small
This is a banner example
large
This is a banner example
<div class="m-alert -banner -info -small" data-title="Banner title">
  This is a banner example
  <button></button>
</div>