'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
State layer
The content color is mixed over the container at a state-specific opacity. Hover, focus, press, and drag become visible without replacing the component's semantic colors.
States · Learn
Interaction states
A state needs two visual channels when accessibility calls for them: a state layer changes the component, and focus also draws a ring that identifies where keyboard interaction landed.
Focus ring
Keyboard focus also paints Material's secondary-color ring. Its short pulse points to the landing location; reduced-motion removes the pulse while keeping the resting ring.
Published state-layer opacities
| State | Token | Amount |
|---|---|---|
| Hover | --md-sys-state-hover-state-layer-opacity | 8% |
| Focus | --md-sys-state-focus-state-layer-opacity | 10% |
| Pressed | --md-sys-state-pressed-state-layer-opacity | 10% |
| Dragged | --md-sys-state-dragged-state-layer-opacity | 16% |
Disabled is a repaint
Do not lower the opacity of the whole component. Material repaints its container with on-surface at 12% and its content at 38%. Two amounts preserve legibility and hierarchy.
Hooks describe behavior
Prefer native :hover, :focus-visible, :active, and aria-pressed. Use a headless library's documented data-state only when native semantics cannot express the state.