We will be updating this content to our new principle-based format in the near future.
Toasts provide brief messages about application state.
The Toast component provides a way to send notifications to the user.
Use Toasts to push messages to your users, based on actions they may perform.
Label. Text label to display at the top of the component
Time. Timestamp displaying when the Toast was triggered.
Close button. Dismisses the Toast.
Description. Accompanying text for additional context.
3Sizing & Spacing
The Toast is of a fixed width, but will resize vertically to fit multiple lines of text within it.
4Hierarchy & Placement
Toast components sit in the top right of the viewport. If multiple are triggered, they stack vertically.
The Toast component has four available states: Default, Danger, Warning, and Success.