Alerts

Alerts are implemented using the ARIA roles role="status" and role="alert", which are designed to provide feedback to users.

Accessibility: Since role="alert" disrupts the user’s workflow and is announced immediately by screen readers, it should only be used for critical messages like We couldn't reserve your seat due to connection failure. Please check your internet connection., or time-sensitive information like Your reserved seat will be released in 5 minutes..

For typical feedback messages, like Profile updated or Failed to save, please check for validation errors., it's recommended to use role="status", since it allows screen readers to announce the message at the next available opportunity without interrupting the user.

Check the Toasts page for instructions on how to create floating alerts, and the Modal page, for dialog alerts.

Basic Usage

Simply add role="status" or role="alert" to any HTML element in combination with variant classes to create an alert message.

Check out the [role="status"] documentation page for all the different variants and modifier combinations.

Note: Alerts without content will be hidden, this way you can add the element to the DOM from the start and it will only be shown and announced when you update its content, without the need to worry about adding/removing it from the DOM.

<div class="success" role="status">
  Item saved successfully.
</div>

<hr>

<div class="danger" role="status">
  Failed to save Item. Please check for validation errors.
</div>

<hr>

Alerts with empty content, stay hidden
<!-- add text to the element below and watch it appear automatically -->
<div class="info subtle" role="status"></div>

With title and description

<div role="status">
  <hgroup>
    <h2>Profile Updated</h2>
    <p>Your profile information has been successfully updated.</p>
  </hgroup>
</div>

With Close Button

When an element has two children (message and close button) role="status|alert" will set a two-column layout, where the first child will take up the remaining space, and the second will fit its content.

Since text alone doesn't count as a child element, we need to wrap it in an element (like <p>) followed by a Close Button, this will cause the text to take up the remaining space and push the button to the end.

<div role="status">
  <p>10 results found</p>
  <button aria-label="Close" class="icon-close"></button>
</div>

With an Icon or Close Button

When an element contains 3 children, role="status|alert" will set a three-column layout, where the first and last children will fit their content, and the middle one will take up the remaining space.

In case you want to add an icon to the left and no close button on the right, since two children will cause the first element to strech, we need to add an empty element as the last child with aria-hidden="true" to make sure it is ignored by assistive technologies, this way the first child (icon) and the last child (empty element) will fit their content, and the middle one (message) will take up the remaining space.

Check out .icon-* components area for more icons.

<div role="status">
  <span class="icon-search" aria-hidden="true"></span>
  <p>10 results found</p>
  <button aria-label="Close" class="icon-close"></button>
</div>

<hr>

<div role="status">
  <span class="icon-search" aria-hidden="true"></span>
  <p>10 results found</p>
  <span aria-hidden="true"></span>
</div>

Little bit of everything

References: Icons, Close Button, Danger Intent, Ghost Modifier, Font Size Utility Classes

<div class="danger ghost" role="status">
  <span class="icon-invalid fs-3" aria-hidden="true"></span>
  <hgroup>
    <h2>Connection error</h2>
    <p>There was an issue connecting to the server. Please try again later.</p>
  </hgroup>
  <button aria-label="Close" class="icon-close"></button>
</div>