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.
CSS Variable | Type | Description |
---|---|---|
--z-toast--color | color | Font color |
--z-toast--bg | color | Background color |
--z-toast--radius | distance | Radius of the button |
...