Interaction states
States communicate the status of a component in response to user interaction.
States communicate the status of a component in response to user interaction.
State changes are lightweight and distinct.
If multiple states occur simultaneously, like selected and hover, each will be clear and obvious.
State changes are similar across components throughout the system.
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.
Graphic elements use a heavier scrim to account for the variation in contrast and detail. Light and dark mode use black (#000).
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.
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.
The enabled state indicates an interactive component.
The disabled state indicates a component isn’t interactive. The component may become interactive when prerequisites are met.
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.
The focus state indicates that a keyboard has tabbed to a component.
The selected state indicates a static choice.
The press state state indicates a tap or click is occurring.
The drag state occurs if an element is actively being held.
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.
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.
Video description: A 2-second video shows three cta buttons. The primary cta in blue reads “Buy It Now” while the secondary buttons are in white and read “Make an offer” and “Add to cart” with a blue outline and text. The pointing hand cursor moves over each button and a hover state layer appears on each button upon hover.
Video description: A 3-second video shows a tab icon animates in a tapping motion in the bottom left corner as the focus blue outline state moves between a form field, cta button, and check box in the center.
Video description: A 4-second video shows three stacked buttons reading from top to bottom “Brand New”, “Seller refurbished”, and “Pre-owned”. The pointing hand cursor selects each button separately. Once selected the buttons receive the selected state layer and an outline around it.
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.
Video description: A 5-second video shows four images of a designer bag stacked in a grid. A cursor hovers over the bottom left tile and drags it up to the top left. The cursor forms a closed hand on drag and the top left image moves to the bottom and snaps into place. The closed hand then takes the top left image and drags it to the bottom left and snaps into place returning it to how it began.
