Toast
View StorybookA 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 |
|---|
Examples
<aside class="d-toast-wrapper">
<div class="d-toast" role="status" 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"><icon-close /></span>
</button>
</div>
</div>
</div>
</aside>
Accessibility
Avoid using toast for critical information since toast disappears automatically and make sure to provide enough time to read the message and act consequently. For best accessible user experience, the amount of time a toast displays for should be user configurable.
Using role="alert", it sets aria-live="assertive" which means it will immediately interrupt anything currently being read by the screen reader, so use it for things that require immediate attention such as:
- An invalid value was entered into a form field
- The user's login session is about to expire
- The connection to the server was lost, local changes will not be saved
Meanwhile role="status" implies aria-live="polite" which means the toast will be read out after what's currently being has finished.
| Item | Applies to | Description |
|---|