default · illustrative
pressed · illustrative
pending · illustrative
error · illustrative
offline · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
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 |
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
disabled · illustrative
error · illustrative
confirmed · illustrative
ANATOMY
- title
- body
- closeAction
- actions
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 |
disabled |
Muted label, disabled semantics, adjacent reason if useful |
No opacity reduction of all ancestor content |
error |
Danger icon, explicit text and retry |
Preserve safe inputs; error related to source |
confirmed |
Success check and specific confirmation |
Retain durable result in the surface |
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
pressed · illustrative
selected · illustrative
pending · illustrative
offline · illustrative
ANATOMY
- currentPosition
- steps
- trailingAffordance
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
selected |
Check, leading marker or tonal boundary; rim light may accompany, never replace it |
Selected / pressed / current state as appropriate |
pending |
Stable label and small progress mark |
Busy, duplicate guard; cancel if operation allows |
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
stale · illustrative
offline · illustrative
ANATOMY
- title
- progressTrack
- elapsedLabel
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 |
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.
