Chi · Alerts

Alerts

Alert messages provide contextual feedback for user actions.

Examples

To render an alert, use the class m-alert. A contextual class (e.g. -warning) is required to provide proper styling.

Base

This is a success alert

This is a danger alert

This is a warning alert

This is a info alert

This is a light alert

This is a dark alert

<div class="m-alert -success" role="alert">This is a success alert</div>
<div class="m-alert -danger" role="alert">This is a danger alert</div>
<div class="m-alert -warning" role="alert">This is a warning alert</div>
<div class="m-alert -info" role="alert">This is an info alert</div>
<div class="m-alert -light" role="alert">This is a light alert</div>
<div class="m-alert -dark" role="alert">This is a dark alert</div>

Icons

Use icons to provide additional clarity. Icons can be added to any alert by applying the class -hasIcon

This is a success alert

This is a danger alert

This is a warning alert

This is a info alert

This is a light alert

This is a dark alert

<div class="m-alert -success -hasIcon" role="alert">This is a success alert</div>
<div class="m-alert -danger -hasIcon" role="alert">This is a danger alert</div>
<div class="m-alert -warning -hasIcon" role="alert">This is a warning alert</div>
<div class="m-alert -info -hasIcon" role="alert">This is an info alert</div>
<div class="m-alert -light -hasIcon" role="alert">This is a light alert</div>
<div class="m-alert -dark -hasIcon" role="alert">This is a dark alert</div>

Titled

This is a danger alert

<div class="m-alert -danger -hasIcon" data-title="Danger" role="alert">
  This is a danger alert
</div>

Dismissible

A button can be added to allow the user to dismiss the alert.

This is a warning alert

<div class="m-alert -warning -hasIcon" data-title="Warning" role="alert">
  This is a warning alert
  <button aria-label="Close"></button>
</div>

Sizes

Large

Apply a -large class to increase the size of the alert.

This is a warning alert

<div class="m-alert -warning -large -hasIcon" data-title="Warning" role="alert">
  This is a warning alert
  <button aria-label="Close"></button>
</div>

Additional alert types

Banner

For alerts that stretch the full length of the page, apply the class -banner. This will remove the border-left, border-right, and border-radius from the alert. Banner alerts are commonly used to remind new users to confirm their email address or notify users when they are experiencing connectivity issues.

<div class="m-alert -banner -success -hasIcon" data-title="Success" role="alert">
  This is a success alert
  <button aria-label="Close"></button>
</div>

Toast

Toasts are unobtrusive alerts used to display brief, auto-expiring information. To use a toast alert, apply the class -toast and ensure the alert is placed in the top right corner or bottom left corner of the screen.

This is a success alert

This is a danger alert

This is a warning alert

This is a info alert

This is a light alert

This is a dark alert

<div class="m-alert -toast -success -hasIcon" data-title="Success" role="alert">
  This is a success alert
  <button aria-label="Close"></button>
</div>
<div class="m-alert -toast -danger -hasIcon" data-title="Danger" role="alert">
  This is a danger alert
  <button aria-label="Close"></button>
</div>
<div class="m-alert -toast -warning -hasIcon" data-title="Warning" role="alert">
  This is a warning alert
  <button aria-label="Close"></button>
</div>
<div class="m-alert -toast -info -hasIcon" data-title="Info" role="alert">
  This is an info alert
  <button aria-label="Close"></button>
</div>
<div class="m-alert -toast -light -hasIcon" data-title="Light" role="alert">
  This is a light alert
  <button aria-label="Close"></button>
</div>
<div class="m-alert -toast -dark -hasIcon" data-title="Dark" role="alert">
  This is a dark alert
  <button aria-label="Close"></button>
</div>