Alert
In-page status. Not a toast. Not a modal. Roles: info, caution, critical, positive.
Spec
- Fill is
-muted. Text isfg-. Never a vivid fill behind type. - Title is optional. Body is required.
- Reserved icon is required. Color is never the only meaning.
- At most one ghost action.
- Full-bleed under 768px.
role="status"+aria-live="polite"for info and positive.role="alert"+ assertive for critical and caution.- Dismiss is a close button. Never a timeout.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Roles
Metrics refresh every 15s. Stale after 45s.
CSV exported.
24 columns, 12,482 rows.
Ingest delay is climbing.
p95 1.4s. Watch the partition rebalance.
Couldn't refresh metrics.
The feed did not respond.
Do / Don't
| Do | Don't |
|---|---|
| Muted fill, status text, reserved icon. | Vivid red/green behind a paragraph. |
| Close button to dismiss. | Auto-dismiss in-page alerts. |
| One ghost action, or none. | Two primaries inside an alert. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| opacity | 280ms --dur-enter | --ease-out | mount | instant or opacity 120ms |
| opacity | 160ms --dur-exit | --ease-out | close | instant |
Accessibility
- Contrast:
fg-on-muted, not brand fill on paper. See Color. - Close is a 44px hit, named “Dismiss”.
- Keyboard reaches the action and the close.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.
Related
- Toast — transient, stacked, timed
- Modal — blocking; not for non-blocking status
- Iconography