Chi Documentation

Alert

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 class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </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 class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </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.

This is a success alert
<div class="m-alert -banner -small -success -hasIcon" role="alert">
  This is a success alert
</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 class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -danger -hasIcon" data-title="Danger" role="alert">
  This is a danger alert
  <button class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -warning -hasIcon" data-title="Warning" role="alert">
  This is a warning alert
  <button class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -info -hasIcon" data-title="Info" role="alert">
  This is an info alert
  <button class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -light -hasIcon" data-title="Light" role="alert">
  This is a light alert
  <button class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -dark -hasIcon" data-title="Dark" role="alert">
  This is a dark alert
  <button class="a-btn -icon -close -small">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>