Toast
Transient. Elevation 4. Stack block-end inline-end.
Spec
- Compact: full width.
- Colors follow Alert: muted +
fg-*, reserved icon. - One line + optional Undo. Not a paragraph.
- 6s timeout.
- Persist if critical, or if focus is inside.
- Do not steal focus.
- Timeout pauses on hover and on focus.
role="status"polite for info / positive / caution.role="alert"for critical.- Reduced: opacity only, no slide.
- Max 3 in the stack. Older ones leave.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Does not steal focus. 6s timeout. Critical persists. Max 3.
Toasts stack at the block-end inline-end. Hover or focus pauses the timer. Undo is the one action.
Do / Don't
| Do | Don't |
|---|---|
| “CSV exported.” | A stack of toasts for spark ticks. |
| Undo as the one action. | A form inside a toast. |
| Persist critical. | Auto-dismiss a destructive failure the operator hasn't seen. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
opacity + translateY(6px) | 280ms --dur-enter | --ease-out | push | opacity only |
| opacity | 160ms --dur-exit | --ease-out | timeout / dismiss | instant |
Accessibility
- Don't move focus. The operator is mid-keystroke.
- Pause when hovered or focused so a reader can hit Undo.
- Close is named “Dismiss”. Undo is named “Undo”.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.