Toast
Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the toast. | 'default' | 'danger' | 'default' |
autoDismiss | auto-dismiss | Timeout in milliseconds before the toast is automatically dismissed. | number | 10000 |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot used for the toast text/message. |
| Event | Detail Type | Description |
|---|---|---|
dismiss | NordEvent | Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM. |
Dependencies
This component is internally dependent on the following components:
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use for short messages that confirm an action taken by a user.
- Use for ephemeral status updates.
- Use in combination with Toast group so that toasts get styled and announced to screen readers correctly.
Don’t
- Don’t use toasts for critical information that user needs to act on. Consider using a Notification instead.
- Don’t rely on users seeing toasts. Toasts are transient and should not be used for critical messages.
- Don’t place interactive content in toasts. Assistive technology like screen readers will not convey any semantics when announcing toast messages.
- Don’t use for error messages unless absolutely necessary. Try to favor a Banner for error messaging instead.
Content guidelines
Toast content should be clear, accurate and easy to understand:
When writing the toast content, use the {noun} + {verb} content formula:
Use a maximum of 3 words when writing the toast content:
When writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:
Never end in punctuation:
Additional considerations
- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.
- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.
Integration
For integration guidelines, please see Web Components documentation .