Warnings
Four shapes — rendered
Banner — Annual report due in 14 days for Acme Holdings.
Callout — `Matter-Version: 2026-04-15` pins all responses to this date.
Inline error — `alex@matterso` isn't a valid email. Did you mean `alex@matter.so`?
Toast — Invitation sent.
Decision tree
- Banner — persistent system state (dashboard-wide). Always actionable. Uses
.status-pendingfamily for "do this soon". - Callout — explanatory aside inside long-form docs. Calm, ink-on-paper.
- Inline error — field-level validation. Sits next to the offending element, red-family border + caption.
- Toast — transient confirmation only ("Saved", "Copied"). Bottom-right, 4 s auto-dismiss.
Rule
Errors are inline, never toasts. Toasts are for transient confirmations only. Anything the user must act on stays inline.
Show validation errors next to the field, in the same color family as
.status-error-text.Don't fire a toast for a form error. The user can't fix what they can't see.