# Toasts

Twenty identity toasts in six groups, each with its matching logo state. Drive the live stack, then browse every type at rest.

## Read this first

These toasts come from the 13 October 2026 design export. They show the design target, not the live product. Some describe features that are not built, such as codes sent by text message or document upload.

## Try the live stack

1. Press a button in the stack to show that toast. The demo also fires toasts on its own.
2. Hover the stack to fan it out. Every timer pauses while you hover, except live countdowns.
3. Drag a toast sideways to dismiss it. A short drag springs back.
4. Press an action, such as **Resend** or **Undo**, to see the toast update in place.

Switch **Card** or **Ink** and **Light** or **Dark** at the top. If you reduce motion, the demo does not autoplay and toasts fade instead of sliding.

_The live toast stack and every toast type appear here on the web page._

## Writing a toast

- Say what happened in the title, in a few words.
- Use the body for the one detail that matters, or what to do next.
- Errors always say what to do next.
- Give a toast at most two actions.