Alerts

Alerts are used to notify users of important information, often as feedback on an action they've just performed.

Success alerts show users they've done something successfully, info alerts provide useful contextual info that doesn't necessarily require action, a warning alert tells the user that something unexpected might have occurred and a danger alert should only be used when the user has caused an error or malfunction of some sort, not just as a noticeable signal.

Alerts can be dismissable, useful if their interaction is still needed on the page.

Congratulations! You have successfully completed a thing.
FYI. You need to know this thing.
Attention! Don't forget to do a thing.

Danger! You have forgotten to do a thing.

Danger! You have forgotten to do a thing.

Danger! You have forgotten to do a thing. Danger! You have forgotten to do a thing. Danger! You have forgotten to do a thing.

<div class="c-alert c-alert--success">
  <div class="c-alert__content">
    <strong>Congratulations!</strong> You have successfully completed a thing.
  </div>
</div>
<div class="c-alert c-alert--info">
  <div class="c-alert__content">
    <strong>FYI.</strong> You need to know this thing.
  </div>
</div>
<div class="c-alert c-alert--warning c-alert--dismissable">
  <button type="button" class="c-alert__close js-alert-close" aria-label="Close">&times;</button>
  <div class="c-alert__content">
    <strong>Attention!</strong> Don't forget to do a thing.
  </div>
</div>
<div class="c-alert c-alert--danger c-alert--dismissable">
  <button type="button" class="c-alert__close js-alert-close" aria-label="Close">&times;</button>
  <div class="c-alert__content">
    <p><strong>Danger! You have forgotten to do a thing.</strong></p>
    <p>Danger! You have forgotten to do a thing.</p>
    <p>Danger! You have forgotten to do a thing. Danger! You have forgotten to do a thing. Danger! You have forgotten to do a thing.</p>
  </div>
</div>

Accessibility notes

Using alert boxes dynamically

If you are inserting alerts into the DOM dynamically and you want screen readers or other assisitive technology to bring them to your users' attention then you should include a role="alert" attribute on the .c-alert element.

The alert component previously contained this attribute but was removed following an accessibility review as this is typically not the intended effect when an alert is included in a statically rendered page.

Options

Atoms

  • alert
    • type: Choose from success, info, warning or danger (required)
    • content: The text to go in the alert. Can include HTML markup (required)
    • dismissable: Boolean. Whether the alert is dismissable or not (optional, default false)