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

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)