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.