Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
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.
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with
Toasts are slightly translucent to blend in with what’s below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.