Transient confirmation of an outcome, floating above the page in a fixed region at z.toast — a toast states what happened in passing and dismisses itself; a decision belongs in a Dialog, feedback that must persist in an Alert. Every example below is fireable: the Show trigger appends that exact configuration into the app's one live region.
An optional status icon at size.icon.md, then the content stack on a space.1 gap: a semibold title — the outcome, the one required part — and an optional one-sentence body in text.secondary, all at font.size.copy-sm. The surface holds one fixed width — half container.sm — so a stack of toasts aligns instead of raggedly hugging each message.
The dismiss X ends the message row as the standard small ghost icon Button wearing i-x, with aria-label required. Button owns its control box, hover, active, focus, and glyph size; Toast owns only its placement. A single-line toast centers its row, while a body or actions row pins the content and dismiss Button to the top.
Fires a success toast — icon, title, body, X, on the solid status fill — into the region: bottom-right, inset space.4, newest last on a space.2 gap, aria-live="polite" and present before any message lands, the newest five visible — older toasts wait hidden and return as visible ones leave. Plain toasts leave after four seconds, the X immediately; timer pause and motion are layer 2.
The unmarked toast is neutral — no icon, no claim — on surface.raised with a hairline border, a deliberate exception to the popover recipe: a toast has no anchor and no backdrop, so the brighter fill is its separation from live content (the shadow.medium slot is consumed but flat in the base). The four status intents take the solid pair, always — emphasis follows lifetime: a toast is glanced at in passing, so status registers via the saturated mode-tuned fill, while the subtle tint stays inline with Alert; a subtle status toast was an Alert with an X on it. The hairline drops on status variants, and glyphs map 1:1 to them — i-success/i-warning/i-error/i-info, never bare i-check.
| Intent | Modifier | Roles | Usage | Demo |
|---|---|---|---|---|
| Neutral | — | surface.raisedtext.primary | The default — quiet confirmations that claim no status | |
| Success | --success | status.success.solid-bgstatus.success.solid-text | A background operation finished well | |
| Warning | --warning | status.warning.solid-bgstatus.warning.solid-text | Degrading, not yet failed | |
| Error | --error | status.error.solid-bgstatus.error.solid-text | A background operation failed — input errors belong to FormField | |
| Info | --info | status.info.solid-bgstatus.info.solid-text | Informational — nothing succeeded or failed |
At most one action — an ordinary Button, sm secondary, never primary, on the neutral surface only: no issued pair puts a control on a solid fill, so an actionable toast is neutral by construction — in its own row under the content on a space.2 gap, flush right against the toast padding; the behavior is layer 2, the look is contracted here. An actionable toast never times out silently: it persists until acted on or dismissed.
Fires a neutral toast with an Undo action — the actions row makes it multi-line by construction, pinning X and content to the top, and it persists until dismissed.
A toast confirms; it never asks.
| Verdict | Rule |
|---|---|
| Do | State the outcome in a few title words, sentence case (Deployment complete, not Success!), with at most one short body sentence — a toast that needs a paragraph, or has no title, is an Alert. |
| Do | Compose every toast dismiss X from the standard small ghost icon Button. Keep aria-label and i-x; let Toast control placement only. |
| Do | Keep an actionable toast alive until acted on or dismissed; plain toasts auto-dismiss, paused on hover and focus — host behavior, layer 1 contracts the policy, not the timer. |
| Do | Take status colors as a pair from the status roles — never pair a background with a foreground it wasn't issued with. |
| Do | Default to neutral and reach for a status variant only when the outcome must register at a glance — status toasts are the solid tier, always; the subtle tint stays inline with Alert. |
| Do | Keep icons decorative (aria-hidden="true") and canonical — the i-success/i-warning/i-error/i-info quartet, never bare i-check; neutral toasts omit the icon. |
| Don’t | Give a toast more than one action, or a primary one — an sm secondary Button on the neutral surface only; an outcome that needs a decision is a Dialog. |
| Don’t | Mint a second region or steal focus — one region per app, and announcement comes from its aria-live, not from moving the user. |