Toast

View Storybook

A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions. It contains at-a-glance information about outcomes and can be paired with actions.

Classes

Class	Applies to	Description
.d-toast	N/A	Default toast style
.d-toast__dialog	N/A	Contains the toast content.
.d-toast--error	.d-toast	Applies error visual style.
.d-toast--info	.d-toast	Applies info visual style.
.d-toast--success	.d-toast	Applies success visual style.
.d-toast--warning	.d-toast	Applies warning visual style.
.d-toast--important	.d-toast	Adds the higher importance style by emboldening the background color. These should only be used for pressing information that needs to be noticed by the user.

Examples

Style

Important?

<aside class="d-toast-wrapper">
  <div class="d-toast" role="alert" aria-hidden="true">
    <div class="d-toast__dialog">
      <div class="d-notice__icon">...</div>
      <div class="d-notice__content">
        <h2 class="d-notice__title">...</h2>
        <p class="d-notice__message">...</p>
      </div>
      <div class="d-notice__actions">
        <button type="button" class="d-btn d-btn--sm d-btn--circle d-btn--muted" aria-label="Close">
          <span class="d-btn__icon">{% iconSystem "close" %}</span>
        </button>
      </div>
    </div>
  </div>
</aside>

Accessibility

Item	Applies to	Description
role="alert"	.d-toast	Provides the user with important, and usually time-sensitive information, often telling the user an element has been updated (Source)
aria-hidden="[true\|false]"	.d-toast	Informs assistive technologies, such as screen readers, if they should ignore the element. This should not be confused with the HTML hidden attribute which tells the browser to not display an element. (Source)