Interaction states

States

State	When	Visual change	In code
Default	The element is waiting	None
Hovered	A pointer is over the element	The background darkens one step; 110 ms	:hover, on pointer devices only
Pressed	A pointer or key is held down	One more step darker, the element scales to 97 %; 70 ms	:active
Focused	Reached by keyboard	2 px focus ring, 2 px outside	:focus-visible
Selected	The element is selected or is the current page	surface-selected background, border-selected edge and a mark that does not depend on colour (check icon, bold text, indicator line)	aria-selected, aria-pressed, aria-current, data-selected
Disabled	The element cannot be used right now	action-disabled colours, no hover or press	disabled or aria-disabled, data-disabled
Loading	Work is in progress	The indicator spins, colours stay the same, focus is kept	data-loading
Invalid	The value does not meet a rule	border-danger edge and error text under the field	aria-invalid, data-invalid
Read-only	The value is visible but cannot be changed	The border is lighter; takes focus and can be copied	readonly, data-readonly
Dragging	The element is being moved	16 % state layer and overlay shadow	data-dragging

Precedence

Several states can apply at once. The look is decided in this order; a higher state overrides a lower one:

1. Disabled
2. Loading
3. Invalid
4. Pressed
5. Hovered
6. Selected
7. Default

The focus ring shows together with every state and no state hides it. A disabled element takes focus only with focusableWhenDisabled; then the ring shows as well.

State layer

Elements without their own action colours (list rows, menu items, table rows) show state with a layer: a layer in the element’s text colour, at the opacity below, is laid over the background. That way the same rule works on every surface and in every mode.

Token	Light mode	Dark mode
--bigbang-state-layer-hovered	0.080.080.08	0.080.080.08
--bigbang-state-layer-focused	0.10.10.1	0.10.10.1
--bigbang-state-layer-pressed	0.10.10.1	0.10.10.1
--bigbang-state-layer-dragged	0.160.160.16	0.160.160.16

Elements with their own action tokens, such as Button, use the action-*-hovered and action-*-pressed colours instead of a layer. See Colours.

Motion

State transitions use motion tokens and change only colour, opacity and transform.

Transition	Token
Hover	motion-hover-duration, motion-hover-easing
Press	motion-press-duration, motion-press-scale
Release	motion-release-duration
Focus	motion-focus-duration
Selection	motion-selection-duration

With reduced motion, scaling and sliding are removed and colour changes happen at once. Details are on the Motion page.

Touch screens

• Touch devices have no hover state; :hover styles stay inside @media (hover: hover) so a tapped element does not look stuck.
• The pressed state lasts until the finger lifts; if the finger slides off the element, the action does not start.
• A long press never starts an action on its own; the same action is also available through a visible control.

Accessibility

• Selected and invalid states carry a mark other than colour (WCAG 1.4.1).
• State indicators (focus ring, selected border, invalid border) have at least 3:1 contrast against the background (WCAG 1.4.11).
• Disabled elements are exempt from the contrast rule; still, nearby text explains why.
• State changes reach the screen reader through ARIA attributes: aria-pressed, aria-expanded, aria-invalid; loading uses a polite status region, not aria-busy. See Accessibility.

Guidelines

Do not show selection with colour alone

Option one

Option two

DoBackground colour and a check mark together; the selection reads without colour.

Option oneOption two

Don'tBackground colour alone; people who cannot tell colours apart cannot see the selection.

Say why instead of disabling

Send

DoThe control stays usable; missing information is explained on click.

Send

Don'tA control disabled without a reason leaves the reader at a dead end.