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 muted alert
<div class="m-alert -bubble -success" role="alert">This is a success alert</div>
<div class="m-alert -bubble -danger" role="alert">This is a danger alert</div>
<div class="m-alert -bubble -warning" role="alert">This is a warning alert</div>
<div class="m-alert -bubble -info" role="alert">This is an info alert</div>
<div class="m-alert -bubble -muted" role="alert">This is a muted alert</div>

Icons

This is a success alert
This is a danger alert
This is a warning alert
This is a info alert
This is a muted alert
<div class="m-alert -bubble -success" role="alert">
  <i class="a-icon -sm--2 icon-circle-check -text--success"></i>
  This is a success alert
</div>
<div class="m-alert -bubble -danger" role="alert">
  <i class="a-icon -sm--2 icon-circle-warning -text--danger"></i>
  This is a danger alert
</div>
<div class="m-alert -bubble -warning" role="alert">
  <i class="a-icon -sm--2 icon-warning -text--warning"></i>
  This is a warning alert
</div>
<div class="m-alert -bubble -info" role="alert">
  <i class="a-icon -sm--2 icon-circle-info -text--info"></i>
  This is a info alert
</div>
<div class="m-alert -bubble -muted" role="alert">
  <i class="a-icon -sm--2 icon-circle-info -text--muted"></i>
  This is a muted alert
</div>
Icon Center

Use the class -center to center the icons.

Info alert with centered icon
<div class="m-alert -bubble -center -info" role="alert">
  <i class="a-icon -sm--2 icon-circle-info -text--info"></i>
  Info alert with centered icon
</div>

Dismissible

Use the class -dismiss and a button to allow the user to dismiss the alert.

This is a warning alert
Warning
This is a warning alert
This is a warning alert
<div class="m-alert -bubble -dismiss -warning" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-warning -text--warning"></i>
    This is a warning alert<button class="a-btn -icon -close -sm">
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -bubble -lg -dismiss -warning" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-warning -text--warning"></i>
    <div>
      <h5 class="a-h5">Warning</h5>
      This is a warning alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -banner -dismiss -warning" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-warning -text--warning"></i>
    This is a warning alert
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Sizes

Large

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

Warning
This is a warning alert
<div class="m-alert -bubble -lg -warning" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-warning -text--warning"></i>
    <div>
      <h5 class="a-h5">Warning</h5>
      This is a warning alert
    </div>
  </div>
</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 -center -success" role="alert">
  <i class="a-icon -sm--2 icon-circle-check -text--success"></i>
  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.

success
This is a success alert
danger
This is a danger alert
warning
This is a warning alert
info
This is a info alert
muted
This is a muted alert
<div class="m-alert -toast -success" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-circle-check -text--success"></i>
    <div>
      <div class="a-h5">success</div>
      This is a success alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
  </div>
<div class="m-alert -toast -danger" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-circle-warning -text--danger"></i>
    <div>
      <div class="a-h5">danger</div>
      This is a danger alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -warning" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-warning -text--warning"></i>
    <div>
      <div class="a-h5">warning</div>
      This is a warning alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -info" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-circle-info -text--info"></i>
    <div>
      <div class="a-h5">info</div>
      This is a info alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -muted" role="alert">
  <div class="m-alert__content">
    <i class="a-icon -sm--2 icon-circle-info -text--muted"></i>
    <div>
      <div class="a-h5">muted</div>
      This is a muted alert
    </div>
  </div>
  <button class="a-btn -icon -close -sm">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>