Actions and selection components
default · illustrative
hover · illustrative
pressed · illustrative
focus · illustrative
pending · illustrative
disabled · illustrative
error · illustrative
confirmed · illustrative
ANATOMY
- label
- optionalLeadingIcon
- progressMark
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
hover |
Tonal lift; no movement of layout |
Optional; a pointer that cannot hover simply never shows it |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
focus |
2px Gold ring + dark separation, 3px offset |
Visible, unclipped and not obscured by sticky UI |
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
hover · illustrative
pressed · illustrative
focus · illustrative
pending · illustrative
disabled · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
hover |
Tonal lift; no movement of layout |
Optional; a pointer that cannot hover simply never shows it |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
focus |
2px Gold ring + dark separation, 3px offset |
Visible, unclipped and not obscured by sticky UI |
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 |
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
hover · illustrative
pressed · illustrative
focus · illustrative
pending · illustrative
disabled · illustrative
error · illustrative
confirmed · illustrative
ANATOMY
- label
- optionalLeadingIcon
- consequenceSummary
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
hover |
Tonal lift; no movement of layout |
Optional; a pointer that cannot hover simply never shows it |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
focus |
2px Gold ring + dark separation, 3px offset |
Visible, unclipped and not obscured by sticky UI |
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
hover · illustrative
pressed · illustrative
focus · illustrative
selected · illustrative
disabled · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
hover |
Tonal lift; no movement of layout |
Optional; a pointer that cannot hover simply never shows it |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
focus |
2px Gold ring + dark separation, 3px offset |
Visible, unclipped and not obscured by sticky UI |
selected |
Check, leading marker or tonal boundary; rim light may accompany, never replace it |
Selected / pressed / current state as appropriate |
disabled |
Muted label, disabled semantics, adjacent reason if useful |
No opacity reduction of all ancestor content |
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
focus · illustrative
pending · illustrative
disabled · 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 |
focus |
2px Gold ring + dark separation, 3px offset |
Visible, unclipped and not obscured by sticky UI |
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 |
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.
All families ↑
