Feedback at the source components
default · illustrative
pending · illustrative
error · illustrative
stale · illustrative
offline · illustrative
ANATOMY
- icon
- message
- recoveryAction
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pending |
Stable label and small progress mark |
Busy, duplicate guard; cancel if operation allows |
error |
Danger icon, explicit text and retry |
Preserve safe inputs; error related to source |
stale |
Muted surface and an age label beside the value |
The value stays readable and carries its age; never a pulse |
offline |
Dimmed live surfaces and an offline notice with what is still available |
Cached content stays readable; recovery names the retry |
Four stills of the same transition. Playback repeats it; the stills explain it on their own.
This tier settles every change at once, so the transition cannot be played here. Switch to System or Reduced to see it run.
default · illustrative
pending · illustrative
confirmed · illustrative
error · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pending |
Stable label and small progress mark |
Busy, duplicate guard; cancel if operation allows |
confirmed |
Success check and specific confirmation |
Retain durable result in the surface |
error |
Danger icon, explicit text and retry |
Preserve safe inputs; error related to source |
Four stills of the same transition. Playback repeats it; the stills explain it on their own.
This tier settles every change at once, so the transition cannot be played here. Switch to System or Reduced to see it run.
default · illustrative
ANATOMY
- title
- explanation
- primaryAction
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
No motif: this component does not animate a state change (C31).
All families ↑