Design Kit

Alert

Alert messages provide contextual feedback for user actions.

Examples

To render an alert, use the class m-alert. Apply a semantic color class that corresponds to the meaning or value state of your alert. Supported classes include -success, -danger, -warning, -info, and -muted. If no class is defined, alerts will default to the base style which uses the body text color. This is useful for displaying neutral alerts with no specific value state.

Bubble

Bubble alerts are designed for displaying inline messages and notifications within forms, panels, cards, and other content areas. They are Chi's default Alert type and will render the same with or without the -bubble type class on m-alert.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="m-alert -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="m-alert -danger" role="alert">
  <i class="m-alert__icon a-icon -icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="m-alert -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="m-alert -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="m-alert -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a muted alert</p>
  </div>
</div>

Centered

Apply the class -center to center the content of a Bubble Alert. Note: Use sparingly. Centered Bubble alerts should only be used to render brief messages on centered forms such as those found on Sign In and Sign Up screens. Centered alerts do not support titles (i.e. m-alert__title).

This is a centered danger alert

<div class="m-alert -danger -center" role="alert">
  <i class="m-alert__icon a-icon icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a centered danger alert</p>
  </div>
</div>

Titled

Use m-alert__title to add a title to an Alert. The title will automatically get colored based on the alerts semantic color class. To override the title color, apply a text color utility class.

Base

This is a base alert

success

This is a success alert

danger

This is a danger alert

warning

This is a warning alert

info

This is an info alert

muted

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Base</p>
    <p class="m-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="m-alert -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="m-alert -danger" role="alert">
  <i class="m-alert__icon a-icon -icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Danger</p>
    <p class="m-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="m-alert -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="m-alert -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Info</p>
    <p class="m-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="m-alert -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Muted</p>
    <p class="m-alert__text">This is a muted alert</p>
  </div>
</div>

Sizes

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

-sm

This is a small success alert

Success

This is a small success alert

-md (default)

This is a success alert

Success

This is a success alert

-lg

This is a large success alert

Success

This is a large success alert

<!-- Small -->
<div class="m-alert -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Small Titled -->
<div class="m-alert -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Medium -->
<div class="m-alert -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Medium Titled -->
<div class="m-alert -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Large -->
<div class="m-alert -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a large success alert</p>
  </div>
</div>
<!-- Large Titled -->
<div class="m-alert -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a large success alert</p>
  </div>
</div>

Dismissible

To allow users to dismiss an alert, use the class -dismiss and insert a dismiss button m-alert__dismiss-button.

This is a dismissible warning alert

Warning

This is a dismissible warning alert

Warning

This is a large dismissible warning alert

<!-- Dismissible -->
<div class="m-alert -warning -dismiss" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Dismissible Titled -->
<div class="m-alert -warning -dismiss" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Large Dismissible Titled -->
<div class="m-alert -warning -dismiss -lg" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a large dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Actionable

While m-alert__actions can be added to any Alert, alert actions are best suited for default or Titled alerts with the size class -lg. Large Alerts have extra m-alert padding, a larger m-alert__icon, and a larger m-alert__dismiss-button.

Success

This is a large dismissible success alert

<div class="m-alert -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a large dismissible success alert</p>
    <div class="m-alert__actions">
      <button class="a-btn -lg -dark -outline">Secondary action</button>
      <button class="a-btn -lg -primary">Primary action</button>
    </div>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Banner

For prominent page level alerts, apply the class -banner to m-alert. Banner alerts are commonly presented above or below the Header component and are used for scenarios such as reminding new users to confirm their email address or notifying users when they are experiencing connectivity issues. Banner alerts include a bottom border by default. If the border contrast conflicts with surrounding elements, it can be removed by applying the class -borderless to m-alert.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert -banner" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="m-alert -banner -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="m-alert -banner -danger" role="alert">
  <i class="m-alert__icon a-icon -icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="m-alert -banner -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="m-alert -banner -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="m-alert -banner -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a muted alert</p>
  </div>
</div>

Centered

Apply the class -center to center the content of a Banner Alert. Note: Use sparingly. Centered Banner alerts should only be used to render brief messages. Centered alerts do not support titles (i.e. m-alert__title).

This is a centered danger alert

<div class="m-alert -banner -danger -center" role="alert">
  <i class="m-alert__icon a-icon icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a centered danger alert</p>
  </div>
</div>

Titled

Use m-alert__title to add a title to an Alert. The title will automatically get colored based on the alerts semantic color class. To override the title color, apply a text color utility class.

Base

This is a base alert

success

This is a success alert

danger

This is a danger alert

warning

This is a warning alert

info

This is an info alert

muted

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert -banner" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Base</p>
    <p class="m-alert__text">This is a base alert</p>
  </div>
</div>
<!-- Success -->
<div class="m-alert -banner -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Danger -->
<div class="m-alert -banner -danger" role="alert">
  <i class="m-alert__icon a-icon -icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Danger</p>
    <p class="m-alert__text">This is a danger alert</p>
  </div>
</div>
<!-- Warning -->
<div class="m-alert -banner -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a warning alert</p>
  </div>
</div>
<!-- Info -->
<div class="m-alert -banner -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Info</p>
    <p class="m-alert__text">This is an info alert</p>
  </div>
</div>
<!-- Muted -->
<div class="m-alert -banner -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Muted</p>
    <p class="m-alert__text">This is a muted alert</p>
  </div>
</div>

Sizes

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

-sm

This is a small success alert

Success

This is a small success alert

-md (default)

This is a success alert

Success

This is a success alert

-lg

This is a large success alert

Success

This is a large success alert

<!-- Small -->
<div class="m-alert -banner -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Small Titled -->
<div class="m-alert -banner -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a small success alert</p>
  </div>
</div>
<!-- Medium -->
<div class="m-alert -banner -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Medium Titled -->
<div class="m-alert -banner -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
</div>
<!-- Large -->
<div class="m-alert -banner -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a large success alert</p>
  </div>
</div>
<!-- Large Titled -->
<div class="m-alert -banner -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a large success alert</p>
  </div>
</div>

Dismissible

To allow users to dismiss an alert, use the class -dismiss and insert a dismiss button m-alert__dismiss-button.

This is a base dismissible warning alert

Warning

This is a dismissible warning alert

Warning

This is a large dismissible warning alert

<!-- Dismissible Base -->
<div class="m-alert -banner -warning -dismiss" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a base dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Dismissible Titled -->
<div class="m-alert -banner -warning -dismiss" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Large Dismissible Titled -->
<div class="m-alert -banner -warning -dismiss -lg" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a dismissible warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Actionable

While m-alert__actions can be added to any Alert, alert actions are best suited for default or Titled alerts with the size class -lg. Large Alerts have extra m-alert padding, a larger m-alert__icon, and a larger m-alert__dismiss-button.

Base

This is a large dismissible alert

<div class="m-alert -banner -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Base</p>
    <p class="m-alert__text">This is a large dismissible alert</p>
    <div class="m-alert__actions">
      <button class="a-btn -lg -dark -outline">Secondary action</button>
      <button class="a-btn -lg -primary">Primary action</button>
    </div>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Toast

Toasts are unobtrusive alerts used to display brief, auto-expiring information. To use a toast alert, apply the class -toast.

Default

This is a base alert

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert -toast" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a base alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Success -->
<div class="m-alert -toast -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Danger -->
<div class="m-alert -toast -danger" role="alert">
  <i class="m-alert__icon a-icon icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a danger alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Warning -->
<div class="m-alert -toast -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Info -->
<div class="m-alert -toast -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is an info alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Muted -->
<div class="m-alert -toast -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a muted alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Titled

Base

This is a base alert

success

This is a success alert

danger

This is a danger alert

warning

This is a warning alert

info

This is an info alert

muted

This is a muted alert

<!-- Base - No semantic color class defined -->
<div class="m-alert -toast" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Base</p>
    <p class="m-alert__text">This is a base alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Success -->
<div class="m-alert -toast -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Danger -->
<div class="m-alert -toast -danger" role="alert">
  <i class="m-alert__icon a-icon icon-circle-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Danger</p>
    <p class="m-alert__text">This is a danger alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Warning -->
<div class="m-alert -toast -warning" role="alert">
  <i class="m-alert__icon a-icon icon-warning"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Warning</p>
    <p class="m-alert__text">This is a warning alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Info -->
<div class="m-alert -toast -info" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Info</p>
    <p class="m-alert__text">This is an info alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<!-- Muted -->
<div class="m-alert -toast -muted" role="alert">
  <i class="m-alert__icon a-icon icon-circle-info"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Muted</p>
    <p class="m-alert__text">This is a muted alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>

Sizes

Use size classes to customize the size of an alert. Supported size classes are -sm, -md, and -lg.

-sm

This is a small success alert

Success

This is a small success alert

-md (default)

This is a success alert

Success

This is a success alert

-lg

This is a large success alert

Success

This is a large success alert

<div class="m-alert -toast -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a small success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -success -sm" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a small success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -success" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__text">This is a large success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>
<div class="m-alert -toast -success -lg" role="alert">
  <i class="m-alert__icon a-icon icon-circle-check"></i>
  <div class="m-alert__content">
    <p class="m-alert__title">Success</p>
    <p class="m-alert__text">This is a large success alert</p>
  </div>
  <button class="m-alert__dismiss-button a-btn -icon -close" aria-label="Close">
    <div class="a-btn__content">
      <i class="a-icon icon-x"></i>
    </div>
  </button>
</div>