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.

<div class="c-alert c-alert--success" role="alert">
  <div class="c-alert__content">
    <strong>Congratulations!</strong> You have successfully completed a thing.
  </div>
</div>
<div class="c-alert c-alert--info" role="alert">
  <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" role="alert">
  <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" role="alert">
  <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>

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)