Toast guidelines
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.
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.
You should receive a warning message when the program detects that something is not behaving right, but it didn't cause any termination.
A new notification appears
Error toasts report a problem.
You should receive an error message when the issue is terminal, this doesn't always mean that the operation stops completely, but the task is not complete.
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
Do: Use a toast for a brief message about the current action.
A new notification appears
Don't: Greet users with a toast when they open a page.
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
Do: A single line of text is readable at a glance.
A new notification appears
- Username is a required field.
- Password must be at least 6 characters long.
- Email is a required field.
Don't: Cram a lot of detail into a toast. These errors should persist in callouts and validations on the form. They don't need to be spelled out in the toast.
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
Do: Use only one action per toast and favor a one-word label. Align actions to the right, which follows our button guidelines for usage within restricted width containers.
A new notification appears
Don't: Use multiple actions. Don't align buttons in toasts to the left. This message is better in a confirmation modal.
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
Do: The check icon reinforces that the action succeeded. The error icon helps users understand the message is an error.
A new notification appears
Don't: Use icons that are hard to understand. They distract from the message.
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
Do: Display one toast at a time.
A new notification appears
A new notification appears
Don't: Stack toasts.
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
Do: Include the object name if it's not too long. Use single quotation marks around the object name if it helps clarify meaning.
A new notification appears
Don't: Use the generic "Your object."
Don't include the word "successfully." It's implied.
A new notification appears
Do: Use this format for a success message.
A new notification appears
Don't: Include "successfully."
For a message about multiple objects, include the object count, but not the names of the objects.
A new notification appears
Do: Include the object count.
A new notification appears
Don't: Overwhelm the user by listing the names of all the objects.
Use call-to-action buttons when the content needs more room
Occasionally, 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.
Do: Use the toast message to provide a summary and a button to link to the full content.
A new notification appears
The maximum bucket size of 200 was exceeded
An extremely long error trace.
Don't: Cram a lot of content into the small space of a toast.