Alerts

Inline status messages — info, success, warning, error.

Info

Heads up

The quick brown fox jumps over the lazy dog.

<div class="alert alert--info" role="status">
  <span class="alert--icon" aria-hidden="true">i</span>
  <div class="alert--body">
    <p class="alert--title">Heads up</p>
    <p>Message body goes here.</p>
  </div>
  <button type="button" class="alert--close" aria-label="Dismiss">
    {% include "components/icons/xmark.svg" %}
  </button>
</div>

Success

Saved

Your changes have been saved.

<div class="alert alert--success" role="status">
  <span class="alert--icon" aria-hidden="true">
    {% include "components/icons/checkmark.svg" %}
  </span>
  <div class="alert--body">
    <p class="alert--title">Saved</p>
    <p>Your changes have been saved.</p>
  </div>
  <button type="button" class="alert--close" aria-label="Dismiss">
    {% include "components/icons/xmark.svg" %}
  </button>
</div>

Warning

Check this

One of the fields looks unusual.

<div class="alert alert--warning" role="status">
  <span class="alert--icon" aria-hidden="true">
    {% include "components/icons/warning.svg" %}
  </span>
  <div class="alert--body">
    <p class="alert--title">Check this</p>
    <p>One of the fields looks unusual.</p>
  </div>
  <button type="button" class="alert--close" aria-label="Dismiss">
    {% include "components/icons/xmark.svg" %}
  </button>
</div>

Error

<div class="alert alert--error" role="alert">
  <span class="alert--icon" aria-hidden="true">
    {% include "components/icons/xmark.svg" %}
  </span>
  <div class="alert--body">
    <p class="alert--title">Something went wrong</p>
    <p>We couldn't save your changes. Try again in a moment.</p>
  </div>
  <button type="button" class="alert--close" aria-label="Dismiss">
    {% include "components/icons/xmark.svg" %}
  </button>
</div>

Alert region

For transient notifications, stack alerts inside an .alert-region container. It's fixed to the bottom-right of the viewport and animates each alert in.

<div class="alert-region" aria-live="polite">
  <div class="alert alert--success" role="status">
    <span class="alert--icon" aria-hidden="true">
      {% include "components/icons/checkmark.svg" %}
    </span>
    <div class="alert--body">
      <p class="alert--title">Saved</p>
      <p>Your changes are live.</p>
    </div>
    <button type="button" class="alert--close" aria-label="Dismiss">
      {% include "components/icons/xmark.svg" %}
    </button>
  </div>
</div>