Interaction states

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

Three tiles with shoes inside are hovered over by a computer cursor. The last shoe tile is selected and an outline appears around it.

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.

A vertically-stacked segmented button group with a cursor clicking on each item. On each click, the button receives the selected state layer and a stroke around it.

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.

Four text buttons stacked in a row in light mode. The first button is hovered by a hand pointer cursor with a state layer of black 4%. The second button is focused with a blue outline and a state layer of black 4%. The third button is pressed with a state layer of back 8%. The fourth button is being dragged with a closed hand icon and a state layer of black 12% and a drop shadow.

Four text buttons stacked in a row in dark mode. The first button is hovered by a hand pointer cursor with a state layer of white 8%. The second button is focused with a blue outline and a state layer of white 8%. The third button is pressed with a state layer of white 12%. The fourth button is being dragged with a closed hand icon and a state layer of white 16%.

Graphics

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

Four image buttons stacked in a row in light mode. The image is of a watch. The first button is hovered by a hand pointer cursor with a state layer of black 12%. The second button is focused with a blue outline and a state layer of black 12%. The third button is pressed with a state layer of back 16%. The fourth button is being dragged with a closed hand icon and a state layer of black 20% and a drop shadow.

Four image buttons stacked in a row in dark mode. The image is of a watch. The first button is hovered by a hand pointer cursor with a state layer of black 12%. The second button is focused with a blue outline and a state layer of black 12%. The third button is pressed with a state layer of back 16%. The fourth button is being dragged with a closed hand icon and a state layer of black 20%.

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.

Two rows of text links in light mode. The first row is a “See more” text link. The left example is hovered with a pointer hand icon and an opacity applied. The right example is a focused state with the blue stroke without the opacity applied. The second row is a page indicator with “1” in the same treatments.

Two rows of text links in dark mode. The first row is a “See more” text link. The left example is hovered with a pointer hand icon and an opacity applied. The right example is a focused state with the blue stroke without the opacity applied. The second row is a page indicator with “1” in the same treatments.

Disabled state

A disabled state uses a disabled color to de-emphasize non-interactive parts of the UI.

Disabled elements in light mode. From top to bottom is cta button, text field, toggle, radio button, and checkbox. All are grayed out. On hover an icon appears next to the cursor containing a circle with a diagonal line.

Disabled elements in dark mode. From top to bottom is cta button, text field, toggle, radio button, and checkbox. All are grayed out. On hover an icon appears next to the cursor containing a circle with a diagonal line.

Resources

Color tokens

Learn about our color tokens.

Change log

Date	Notes
Jun, 2024	Updated to eBay Evo
Feb, 2022	Page created