TOAST
A toast is a brief, temporary notification that confirms the outcome of an action or process that's just happened.
WHEN TO USE
Use a toast
To provide users with quick, non-intrusive feedback about the result of an action or process.
Don’t use a toast
If the message is critical or requires the user to take further action.
BEST PRACTICE
Only display information that is already available elsewhere on the screen, in case the user misses the toast.
Never use toasts for critical or time-sensitive information, users may overlook them or not read the message before it disappears.
Include an action button only if absolutely necessary, and ensure the same action can be performed elsewhere in the interface.
Keep the message short and specific — users should understand it at a glance.
Ensure the toast is visible long enough to read comfortably, but doesn’t interrupt the overall flow.
PLACEMENT
Place the toast at the bottom center of the screen on mobile, just above the bottom navigation. On web, position it at the top center.
Only display one toast on a screen at a time.
INTERACTION
Toasts are temporary and disappear automatically. Users don’t need to interact with or dismiss them.
The only clickable element should be an optional button, which should only be included if necessary.
There should never be more than one button, and the same action must be accessible elsewhere on the screen.
CONTENT
Text
The text should:
—
Confirm the action that just occurred
—
Follow the noun + verb pattern
—
Be three words or fewer
—
Avoid using a full stop
AVAILABILITY