Toast
Brief, auto-dismissing confirmation of a background action. Always non-blocking; never asks for input. Use it to confirm "we heard you" — not to make the operator decide.
Default
Dark surface, white text, 380 px max. Anchors bottom-right with a 16 px gutter.
Tones
Four canonical tones. Neutral is by far the most common; danger reserved for actual failure.
With action
A single action — Undo, View, Retry. Never more than one. If you need two actions, use a confirmation modal instead.
Stacking
Up to three toasts stack vertically with 8 px gap. The oldest dismisses first.
Parts
| Property | Value | Notes |
|---|---|---|
| max width | 380 px | Long titles wrap |
| padding | 12 px 14 px | — |
| icon | 18 × 18 px | Always present |
| position | fixed · bottom-right | 16 px gutter |
| duration | 5 s default · 8 s with action | Sticky on hover |
| stack limit | 3 | Older slides out |
Do & don't
Use toast for fire-and-forget confirmations — "Saved", "Printed", "Sent". The action already happened.
Ask the operator to decide inside a toast — "Discard or save?" That's a confirm modal.
Pair destructive confirmations with Undo. "3 receipts archived. [Undo]"
Use toast for error messages the operator must act on. Surface a persistent inline alert instead.
Related
For persistent in-page notices, see Alert. For the bell-icon inbox, see Notifications.