About
A state layer is the translucent wash a component paints over itself to show that you are hovering it, that it has focus, or that you are pressing it. Material 3 uses it in place of the ink ripple. It is a foundation, so you never write markup for one. Components paint it behind themselves, and these tokens decide how strong it is.
The opacity lives in one place, so changing it at runtime updates every component at once without a rebuild.
Opacities
| Token | Value | Applies when |
|---|---|---|
--md-sys-state-hover-state-layer-opacity | 0.08 | The pointer is over the control. |
--md-sys-state-focus-state-layer-opacity | 0.1 | The control has visible focus. |
--md-sys-state-pressed-state-layer-opacity | 0.1 | The control is being pressed. |
--md-sys-state-dragged-state-layer-opacity | 0.16 | The control is being dragged. |
These are the md.sys.state values from the Material 3 token set. Focus and
pressed are both 0.1.
Overriding
Set the token on :root to change every component, or on a subtree to change
only what is inside it.
<style>
:root { --md-sys-state-hover-state-layer-opacity: 0.12; }
</style>Some components have their own state layer token. Set it to change one component without touching the rest. Its default value still comes from the foundation token.
<style>
.my-panel { --md-comp-card-hover-state-layer-opacity: 0.04; }
</style>Two shapes
Most components draw the layer as an overlay filling the control. Checkboxes and radio buttons have no room for one, so they draw it as a ring growing out from the control's edge to the state layer size. Both read the same opacity, so they stay in step.