State Layers
Interactive state feedback using semi-transparent color overlays. State layers provide visual feedback for hover, focus, press, and drag interactions.
7 statesM3 Exclusive
Interaction States
Enabled
0%
Hovered
8%
Focused
10%
Pressed
10%
How State Layers Work
State layers are semi-transparent overlays that communicate interaction states. The overlay color is typically the component's "on" color (e.g., on-primary for a primary button).
- Hover (8%): Mouse/cursor moves over the element
- Focus (10%): Element receives keyboard focus
- Pressed (10%): Element is being actively pressed/clicked
- Dragged (16%): Element is being dragged
Interactive State Layer Demo
On Primary
Enabled
On Surface
Enabled
On Container
Enabled
Current opacity:
0%State Layer Reference
Enabled
0% opacity
Default state, no overlay
Button
Hovered
8% opacity
Cursor/pointer over element
Button
Focused
10% opacity
Keyboard/accessibility focus
Button
Pressed
10% opacity
Active touch/click
Button
Dragged
16% opacity
Element being dragged
Button
Disabled (Container)
12% opacity
Container at 12% on-surface
Button
Disabled (Content)
38% opacity
Content at 38% on-surface
Button
| State | Opacity | Description | |
|---|---|---|---|
| Enabled | 0% | Default state, no overlay | |
| Hovered | 8% | Cursor/pointer over element | |
| Focused | 10% | Keyboard/accessibility focus | |
| Pressed | 10% | Active touch/click | |
| Dragged | 16% | Element being dragged | |
| Disabled (Container) | 12% | Container at 12% on-surface | |
| Disabled (Content) | 38% | Content at 38% on-surface |