Interaction states
States communicate the status of a component in response to user interaction.
Subtle
State changes are lightweight and distinct.
Additives
If multiple states occur simultaneously, like selected and hover, each will be clear and obvious.
Consistent
State changes are similar across components throughout the system.

Enabled
The enabled state indicates an interactive component.
Video description: A 2-second video shows a gray disabled button that reads “+ Create new”. When the cursor hovers over it an icon with a circle with a line diagonally through it appears indicating the button is not able to be interacted with.
Disabled
The disabled state indicates a component isn’t interactive. The component may become interactive when prerequisites are met.
Hover
The hover state indicates that a cursor is actively hovering over a component. Hover states can be combined with focused, activated, selected, or pressed states.
Focus
The focus state indicates that a keyboard has tabbed to a component.
Selected
The selected state indicates a static choice.
Video description: A 2-second video shows one blue cta button that reads “Buy It Now”. The cursor hovers over it and presses it. When selected the button scales down a bit to indicate the motion of pressing it.
Press
The press state state indicates a tap or click is occurring.
Drag
The drag state occurs if an element is actively being held.

Active
The active state indicates a current destination or selection.
Video description: A 5-second animation shows the anatomy of a greyscale tile state layer. It transitions to an isometric, exploded view. Number 1 points to “Label” on the top. Number 2 points to a middle state layer with an opacity. Number 3 points to the content layer at the bottom. It transitions back to a flat tile.
- Label
- State layer
- Content
Color fill
For elements with a container, a state-layer is added above the content. Each state increases the opacity by 4%. Dark mode uses white (#FFF) for the interaction layer instead of black.


Graphics
Graphic elements use a heavier scrim to account for the variation in contrast and detail. Light and dark mode use black (#000).


No container
Elements that do not have a container, like links or pagination, use opacity to indicate a change in state. Light and dark mode use 60% opacity for hover states. The focused state does not receive the opacity shift.



