Toasts
Example
A basic form of the toasts.
This is a normal message.
This is a success message.
This is an error message.
This is a warning message.
Condensed
Vertically stacking multiple toasts in a readable manner.
Your email has been sent
Dismiss button
Use dismiss-alert to dismiss a content.
Your email has been sent
Solid color variants
The default form of solid color toasts.
Soft color variants
The default form of soft color toasts.
With actions
Add additional controls and components to toasts.
App notifications
Stack
Vertically stacking multiple toasts in a readable manner.
App notifications
Successfully updated!
Placement
Display a notification message at any place of the viewport.
Top left
Top center
Top right
Center
Bottom left
Bottom center
Bottom right
Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
Action in progress