Component states and the ripple feedback system
Aliases: state layer · ripple · ink reaction · pressed state
What it is
Material does not show that a component is interactive by swapping in a “pressed picture.” It stacks two kinds of feedback on the surface: a state layer and a ripple (once called ink). The state layer is a translucent tint for enabled, hovered, focused, pressed, dragged, and selected; the surface’s theme color stays put. The ripple expands from the contact point and marks “this press happened here.” Disabled means the ripple is gone and contrast drops—not that the control has been replaced by a different one.
This is about what a finger or pointer is doing to the surface, not how high the surface sits. A press with no ripple, or a button that swaps its entire fill, makes state and theme fight for one channel: after a theme change the pressed state may vanish, or look like a different component.
Why it happens
State layers can coexist with theming because they overlay color rather than replace it. Surface color comes from a theme role (primary, surface, error); state only changes the opacity of the layer above. The same button therefore keeps one set of state opacities after dynamic color shifts, instead of needing eight redrawn assets per theme. The ripple originates at pointer coordinates so the hit point becomes a visible event—the user can check whether the system registered the spot they meant. It is painted under content and over the state layer’s host, so type is not washed out and the surface role is not rewritten by ink.
Pressed is momentary; selected is persistent. The first is one expansion of the ripple, the second is a state layer that stays. Looping a ripple to mean selected makes transient feedback and durable state indistinguishable. Disabled cuts the ripple because disabled means “no action will complete here”; playing ink anyway announces a hit that will not happen.
Where it stops holding
On touch-only devices, hover must not be the only cue that something is tappable, or pointer users and finger users will see different interactive ranges. Television and far-viewing distances cannot resolve a fine ripple; they need a clearer focus ring. A custom-drawn surface that already swaps fill for press, then adds a system ripple, produces double ink. List items being dragged or scrolled should not fire a ripple on every small move, or the whole column will flash. Time-critical controls (rhythm-game hits, a camera shutter) make a ripple feel late; use an immediate state-layer change rather than waiting for the expansion to finish before acknowledging the hit.
Applying it
- Put interaction on a state layer over the themed surface; do not author separate fills for press, hover, and selected. Originate ripples at the real contact point and paint them under content.
- Split press (momentary) from selected (persistent): selected is a held state layer, not a looping ripple.
- Disabled cancels the ripple and lowers contrast, while keeping a name and role that assistive technology can still reach. Do not grey the control and keep playing ink.
- Verify by running hover, keyboard focus, press, selected, and disabled on the same component: the surface role must not become another fill, ripples must expand from the contact point, and disabled must produce no ripple. Re-run the same states after a dynamic color change. Any state that is readable only after a redraw was written into fill instead of into a layer.