Toast is a temporary alert that is triggered by a user action.
Toast is one of three types of notifications available. Toasts provide transient, non-disruptive feedback on the outcome of an action.
- Title: Text that explains the purpose of the alert.
- Icon: Represents the severity of the notification supported by color.
- Close button (optional): An affordance can be included to dismiss a toast.
- Action (optional): Non-dismissable toasts can include a link that will let the user address the notification.
Open the component in Figma.
Use toasts for these scenarios:
- For transient feedback based on user action.
- For non-critical actions.
- To immediately confirm a user action.
Use another type of notification for scenarios when you need information to be displayed that may not be based on a user action, or needs to be displayed for longer, or in a different location.
Use a callout instead:
- When you need an alert to remain until an issue is fixed.
- When you need the alert to be in context of a specific area.
Use a banner instead:
- When you have system-wide informational, warning, or error messages that require user attention.
- When you need a notification displayed according to the system settings (this could be a single view, a time period, or until an action is completed).
Toasts are dismissive by default, so the title should be a maximum of five words.
If a longer message is needed, use the non-dismissive variant and include a link to take users to a dialog or a new page with the rest of the information.
Toasts display only at the bottom right of the screen or page.
Toasts slide up from the bottom of the page and slide down once dismissed. If multiple toasts are visible at once, they will stack on top of each other with the most recent one being the bottom-most toast.
The width of the toast is fixed, but the height will adapt to its content.
By default, a toast disappears without requiring user input. Any crucial information included in it should also be available somewhere else in the page.
When using the non-dismissive variant, the toast remains until dismissed by the user.
The toast color and icon indicate the severity of the message.
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Toasts should be clear and concise so users can quickly understand what happened and what their next steps are, if any. The following recommendations help keep your toast messages simple and straightforward.
- Use five words or less.
- If a longer message is needed for an informational toast, write in a short sentence in the pattern of subject + verb + optional additional information.
- Toasts should have a neutral, instructive tone.
- Write in sentence case (capitalize the first word and proper nouns only).
- Avoid end punctuation.
- Only include an action in a toast if it’s also available elsewhere on the page.
- Tell users where the link will take them.
- Keep link text concise. Use ither a single verb or verb + noun.
- Don’t use a link to dismiss a toast, use close [X].
Avoid using a toast for critical information that users need to act on immediately. Toasts might be difficult for users with low vision or low dexterity to access because they:
- Can disappear automatically
- Can’t be easily accessed with the keyboard
- Might appear outside of the user’s current focus.
Make sure that users can also accomplish the action in the toast another way, since the toast action may be difficult to access for some users.
- Color only supports toasts' messages because it’s not conveyed by assistive technologies.
- Toasts use colors to provide consistent semantic meaning and communicate a level of visual importance for users. Each is designed to meet contrast requirements for accessibility. Don’t change colors or text colors.
- Use appropriate vocabulary and tone to clearly explain the severity of the toast for users who can’t recognize certain colors.
No additional content is needed for accessibility tags or labels.
When the component is dynamically displayed, the content is automatically announced by most screen readers.