English
Basic Toast
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.
Solid color variants
The default form of solid color toasts.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Soft color variants
The default form of Soft color toasts.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Condensed
Vertically stacking multiple toasts in a readable manner.
Your email has been sent
Progress
You can also add additional elements, such as an icon and a progress bar.
Uploading 3 files
57% · 5 seconds left
Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
Loading...
Action in progress
With Actions
Add additional controls and components to toasts.
App notifications
Notifications may include alerts, sounds and icon badges.
Avatar
You can also add additional elements, such as an avatar image.
James mentioned you in a comment
Nice work! Keep it up!
Stack
Vertically stacking multiple toasts in a readable manner.
App notifications
Notifications may include alerts, sounds and icon badges.
Your app preferences has been successfully updated.
Placement
Display a notification message at any place of the viewport.