Expressive

Foundations

Interaction

Hover, focus, press and drag look the same on every component, because they all come from one set of interaction tokens instead of being styled one by one.

State layers

A state layer is a translucent overlay in the content color. Its opacity says what's happening: 8% on hover, 10% on focus and press, 16% while dragging.

Enabled
Hover
Focus
Pressed
Dragged
<button className="state-layer focus-ring rounded-shape-full bg-secondary-container px-4 py-2">Filter</button>

state-layer handles hover, focus, press and data-dragged automatically. It ignores hover on touch screens, where hover sticks after a tap.

Focus ring

focus-ring draws an outline in the secondary color, only for keyboard focus (:focus-visible), so mouse users don't see rings on click.

Ripple

Buttons, icon buttons, FABs and chips also show a ripple that grows from where you pressed. It runs on the motion engine and is skipped when reduced motion is on.

Tokens

  • --ex-state-hover, --ex-state-focus, --ex-state-pressed, --ex-state-dragged
  • --ex-disabled-content (38%) and --ex-disabled-container (10%)
  • --ex-focus-ring-width, --ex-focus-ring-offset, --ex-focus-ring-color
createTheme({ interaction: { stateLayer: { hover: 0.06 }, focusRing: { width: 2, offset: 3 } } });