Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Examples
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.
Translucent
Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
Placement
Place toasts with custom CSS as you need them. The top right is often used
for notifications, as is the top middle. If you’re only ever going to show
one toast at a time, put the positioning styles right on the
.toast.
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
Accessibility
Toasts are intended to be small interruptions to your visitors or users, so
to help those with screen readers and similar assistive technologies, you
should wrap your toasts in an
aria-live region. Changes to
live regions (such as injecting/updating a
toast component) are automatically announced by screen readers without
needing to move the user’s focus or otherwise interrupt the user.
Additionally, include aria-atomic="true" to ensure that the
entire toast is always announced as a single (atomic) unit, rather than
announcing what was changed (which could lead to problems if you only update
part of the toast’s content, or if displaying
the same toast content at a later point in time). If the information needed
is important for the process, e.g. for a list of errors in a form, then use
the alert component instead of
toast.