Notification
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Do you know the latest update of 2022? Our roadmap is alive for future updates.
Notifications
4 New
Debi Cakar commented on Ecosystem and conservation
1m ago
Edward Adams invite you to Prototyping
9h ago
Richard Charles mentioned you in UX Basics Field
13h agoYou swapped exactly 0.230000 ETH for 28,031.99
17h ago
Basic
To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.
Yoda
11 mins ago
Hello, world! This is a toast message.
Live
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with .hide.
Yoda
11 mins ago
Hello, world! This is a toast message.
Translucent
Toasts are slightly translucent to blend in with what’s below them.
Yoda
11 mins ago
Hello, world! This is a toast message.
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.