Toast notificationsbeta
Toast notification is a floating box on the bottom left that presents timely information, including confirmation of actions, alerts, and errors.
2. Configurations
2.1 Variant
Toast notification has 5 variants:
- informational
- error
- success
- attention
- other
Icon and color are built-in attributes for the message type. The icon is customizable only for other.
2.2 Call-to-action trigger
There are 3 trigger choices: none, button and link. Use none as default.
2.3 Subtext
Notification toasts supports subtext.
3. Keyboard experience
Keyboard does not focus on toast notification.
5. Behavior
5.1 Dismissing a toast
- A toast notification disappears in 3.5s without user interaction.
- Users can click the cross to dismiss the toast notification.
- If a user clicks on the CTA, action will take effect, and the toast will disappear simultaneously.
5.2 Triggering multiple toasts
When multiple toasts are triggered, they infinitely stack on top of the previous one.
All toasts will only be dismissed when the 3s (10s for error message) time is out, or when the user dismisses it.
6. Resilience & responsiveness
6.1 Modal width
A toast notification has a fixed width and position. It stays at the bottom left regardless of the screen size.
6.2 Text wrapping
Body text and subtext expand as much as it can within the confines of the parent container. Once hit the boundary, the text wraps to the next line.
6.3 Link wrapping
Link expand as much as it can within the confines of the parent container. Once hit the boundary, the text wraps to the next line.
