Toast
Toasts display brief, temporary notifications. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.
Table of Contents
Edit this section, Opens in new windowVariations
| Type | Purpose |
|---|---|
| Default toast | A neutral message |
| Emphasized toast | An emphasized message |
| Info toast | An informative message |
| Success toast | A successful message |
| Warning toast | A warning message |
| Error toast | An error message |
Usage
Principles
Toast or dialog?
Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience. Dialogs are ideal when a situation requires the user's attention, either for displaying important information or prompting for a response.
Your file has been uploaded.
Placement
The toast position is always bottom center of screen.
Don't display more than one action
Actionable toasts should only have one button.
Don't include a redundant action
Actionable toasts should not have a button with a redundant action. For example, “dismiss” would be redundant because all toasts already have a close button.
Multiple toasts
Max two toasts can be present at all times. If two toasts are present, and a new one is presented, remove the oldest toast.
Behaviours
Modifiers
Default
Emphasized
Info
Success
Warning
Error
Accessibility
Announcing toast message content without focus
Whenever a toast is present, use srSpeak to read the messagge to the user.
New to WCAG 2.1, satisfying Guideline 4.1.3 requires that:
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Using ARIA techniques such as role alert and aria-live, toast messages can be made available for screen reading technologies as soon as they are displayed.
Focus
If a Toast has got focusable elements, make sure the focus is set to the first focusable element when the toast is in the view.
Also, make sure you have focus trapped the keyboard navigation when focusing the first focusable element.
Keyboard navigation
The user can navigate the focusable elements with Tab and Shift +Tab. The user can also use Enter for interactive elements.
Anatomy
- Text
- Action (optional)
- Close (optional)
Options
Toasts must include text to communicate a message. Write the text as concisely as possible while still being clear about what has happened or happening
An action can be included. Let the action label be short, consice and actionable
Whenever an action is used, a close action is mandatory
Auto dismissable
By default, a toast will dismiss after 5 seconds. A toast also has the option to be closed by a close button, when an action is used. If an auto dismissable toast is used, make sure that the action is still accessible elsewhere in the application.