This page documents patterns for using toasts, short messages that appears on the lower right corner and time out after a few seconds. They are a popular design choice because they don't need to fit in a layout and don't disrupt the user.
Toast types
A new notification appears
Success toasts indicate that everything worked out
They are the most-commonly used toasts.
A new notification appears
Warning toasts direct user attention to a potential problem
These toasts work well in monitoring apps when something significant requires action.
A new notification appears
Error toasts report a problem
An error toast might let users know an action didn't complete or that a form has errors.
A new notification appears
Info toasts relay neutral information
The default toast, an info toast might notify users about an ongoing action.
Use a toast for a timely message
Toasts are appropriate for short feedback related to a user action. A toast should contain a message about a current action, not a historical action.
A new notification appears
A new notification appears
Most often, it's a single line of text
By default, a toast stays on the screen 10 seconds. Users should be able read the message in 6 to 7 seconds. The message should get straight to the point and rarely include more than one line.
A new notification appears
A new notification appears
- Username is a required field.
- Password must be at least 6 characters long.
- Email is a required field.
Toasts should only contain a single action
A toast can have a single action, styled as a standard button. If more actions are needed, or if the action is important enough to interrupt the user, use a modal instead.
A new notification appears
A new notification appears
Icons should emphasize actions
An icon on the left of the message can help define the message type.
A new notification appears
A new notification appears
A new notification appears
Display one toast at a time
Users should be able to take in all the details from one toast before the next one arrives.
A new notification appears
A new notification appears
A new notification appears
Keep messages as short as possible
For common actions such as create, add, delete, remove, and save, include the object type, the object name if available, and the past tense of the action.
A new notification appears
A new notification appears
Don't include the word "successfully." It's implied.
A new notification appears
A new notification appears
For a message about multiple objects, include the object count, but not the names of the objects.
A new notification appears
A new notification appears
Use call-to-action buttons when the content needs more room
Occassionally the content of a toast is too involved to fit into the constrained space of a toast. This is common in long error messages. In these cases use the toast to deliver the summary of the information and use a button to provide a call-to-action for the full message.
A new notification appears
The maximum bucket size of 200 was exceeded.
A new notification appears
An extremely long error trace.