Toast
Overview
Toasts inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
On larger screens, they should be placed at the bottom left or bottom middle. Ensure that the toasts will not obscure key controls. On smaller screens, the toast should appear at the bottom middle.
Use when
- Use for low priority notifications that don't require user input.
- Use to confirm an action the user has just taken, such as creating a new record, moving a record to a new folder, or making changes to a record.
Don't use when
- Don't use for system errors that require user input to continue. Use a dialog.
- Don't use to confirm whether a user would like to proceed. Use a dialog instead.
- Don't use for municipal announcements on community apps, use a banner instead.
- Don't use to display information that could be referenced multiple times, such as a helper information. Consider an inline message instead.
- Don't use to display an interactive tour of multiple new features. Use a rich tooltip (coming soon!) or WalkMe (guidance coming soon!) instead.
Best practices
Only one toast may be displayed at a time. Use successive toasts if more than one is needed.
A toast can contain a single action. Because a toast disappears automatically, the action shouldn’t be “Dismiss” or “Cancel.”
If there is a FAB on the page, toasts should appear above the FAB.
If the action is too long to be displayed inline with the toast message, it may be displayed on a new line below the text.
Display length
- All toast messages should be displayed for at least 5 seconds to meet current accessibility recommendations.
- Messages over 10 words should start at 5 seconds and add 0.5 seconds per additional word.
Hover-stay
- Ensure all toast messages include a hover-stay to accommodate users needing more time to read.