Interaction states

States communicate the status of a component in response to user interaction.

Video description: A 5-second video shows three tiles of shoe images on a blue background. The computer cursor begins hover on the left image and moves to the right image where the tile is selected and a black outline appears around it. The cursor deselects the image and the outline disappears. The cursor hovers back to the image on the left.

Considerations

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.

Types

Enabled

The enabled state indicates an interactive component.

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.

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.

State layer

A state layer is a semi-transparent overlay applied to an element, acting as a visual indicator of its current state. Only one state layer can be active at a time.

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.