Toasts
Basic example
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.
Live example
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
Custom content
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup.
Color schemes
Building on the above example, you can create different toast color schemes with our color and background utilities.