Toast
Shows a brief and informative temporary message.
Some messages don’t have permanent effects, such as feedback on a user action and warnings about specific states. Let users know that their request is being processed or has been completed using a toast message that disappears on its own.
Toasts are temporary notifications, so they are best for short and clear messages. If more information is necessary, use a text link to a more detailed description (don’t truncate the toast itself).
If your message could include action from the user, use a standard alert that will stay on the screen. If you require action before continuing, use a dialog (for simple choices) or modal.
Component status





Guidelines
Keep it short
Toasts only appear temporarily, so there’s no time for long messages. Limit yourself to no more than 1 line. Aim for shorter if possible.
Use for non-critical messages
Toasts usually disappear on their own. So any critical messages or errors that would block a user’s flow won’t get enough attention.
For errors and other critical messages, place the message in the screen itself. If the message is important but doesn’t block the flow, use an alert. If the user should be blocked, use a modal or dialog.
Not actionable
Toasts are built for messages only, not actions. They can include links to additional information, but nothing that would be required. Toasts can disappear, meaning the actions would too.
Make the actions available directly on the screen. If there are actions associated with the message, use an alert. Otherwise, use buttons and other action components.
Use more than just color
To maximize accessibility, make sure the message is clear from the content. Icons can also support the message.
Color alone does not always distinguish different toast types.
Toast types
Success
Success toasts confirm that a user’s action was processed. Use them to show success when the screen doesn’t change.
Warning
Warning toasts warn the user about situations that might be unfavorable. Use them for general travel warnings. Do not use them for any critical information that should break the user’s flow.
Informational
Informational toasts present general content without an associated positive (success) or negative (warning) emotion.
Look & feel
Positioning
This component can be in different positions that are commonly used on websites, such as a corner of the screen. For mobile devices, the component is located at the top of the screen and is stretched to cover the entire screen width.
Related components
Alert
Toasts sit apart from the main screen and are temporary. For a message in the main screen that stays visible (and is optionally dismissable), use an alert.
Modal/Dialog
Toasts sit aside from the main user flow and are temporary. For messages that block the user flow and prevent them from continuing until an action is taken, use a dialog (for simple actions) or modal.