Status
The status of the component
Component checklist
Documentation in progress
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Code Sandbox
Usage Guidelines
The toasts must contain text
Always include text in toast components to provide important context and information. An empty toast or one with only icons can confuse users.
Do
The toast must contain clear text and cannot be be left empty.
Don't
An empty toast and/or one the that only contains icons is invalid.
Concise text
Use clear and simple language, including only the most important details.
Do
The toast should be a straightforward and quick read as it can be timed before disappearing.
Don't
Avoid long-winded explanations for confirmations and errors; the information will wrap to a second line and eventually truncate.
Placement
By default, a toast is placed at the top right for desktop platform scales to avoid disrupting the user experience. For desktop applications, a toast should be placed 16 px away from the top of the viewport. If a toast isn’t noticeable or disrupts the user experience, its placement can be changed to the bottom right.
When multiple toasts exist, the most recent should appear above the previous toasts. The gap between stacked toast should be 4px.
Do
All toasts must appear in the top right of the viewport. When multiple toasts exist, the most recent should appear above the previous toasts. The gap between stacked toast should be 4px.
Don't
Avoid placing the toasts at the bottom of the viewport
Prevent disruptive modals when possible
Do
Toasts are best suited for confirmations, notifications, and low-priority alerts that otherwise won’t interrupt the user experience.
Don't
Dialogues and models are for larger situations that require the user’s attention by providing higher-priority information or prompting action in order to proceed.
Avoid the excessive use of toasts
Limiting excessive use of toasts is essential to avoid overwhelming users with information. Too many toasts can distract and disrupt the user experience and lead to fatigue, causing important messages to be overlooked. Therefore, toasts should be used judiciously for low-priority alerts and notifications.
Do
Use toasts to communicate low-priority information rather than to verify that an action has occurred.
Don't
While not as disruptive as modals, toasts may become intrusive when used in excess and interfere with other user interface elements.
Use the proper toast option
Action toasts with Calls to Action (CTAs) are helpful in user interface design. They provide info and prompt users to take specific actions, guiding them towards a response or interaction.
Do
This type of toast serves as a reminder and shouldn't need explicit action to dismiss. In this case, the warning notification toast is best suited.
Do
Action toasts with CTAs are valuable for communicating information and prompting user actions in a concise and unobtrusive manner.