Toast
changes in status, confirmations and updates in the background without interrupting users' workflow, and can be colored-coded to visually communicate their status: inf, positive, negative or alert.
Usage guidelines
When to use
- To communicate information on the status of the system that do not require further actions from the users.
When not to use
- When the notification message needs to be manually dismissed or present any sort of actions for users to perform. Use Alert instead.
Writing guidelines
Length Notification messages should be direct and concise. Text can wrap to more than one line if necessary.
Capitalization and case Write text in notifications in sentence case.
Specifications
Anatomy
- Container: its color can vary according to the status (info, positive, negative, alert).
- Text: communicates a short feedback message.
- Timestamp (optional): indicates the time the notification was sent.
Size
Toast come in one size. The width and height can vary according to content length and device or container size. In general, make sure content doesn't exceed two lines.
Styling
Notifications can be styled to communicate their status: info, positive, negative or alert.
Behavior
Positioning and alignment
Toasts are always placed floating at the bottom of the screen. They can be stretched to fit the width of the container or device maintaining a 24 px margin from all edges.
Toast groups
More than one notification can be displayed at a time. Leave a 12px spacing between items.
Accessibility considerations
Don't use color as the only way to communicate meaning. Make sure the text is clear and useful and make use of icons if they can help enhance the meaning.
Be mindful that when reading a toast notification, users with various disabilities might need a longer time to read the entire text. This might be an issue if the toast disappears too soon.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the How it works documentation.
...