Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Visual States

Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.

Definition

Visual states describe how a component looks in each condition: rest, hover, focus, active, selected, disabled, loading, error and read-only. Undefined states become implementation decisions, which is how inconsistency enters a product.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. The states to specify
  3. Combined states are where bugs live
  4. In practice
  5. Sources
  6. Continue from here
Save changesRestSave changesHoverSave changesFocusSave changesActiveSave changesDisabledSaving…Loading
A complete state matrix for a single component. Specifying it once in the design system removes the question from every future implementation.

The states to specify

StateTriggerNotes
RestDefaultMust already signal that the element is interactive.
HoverPointer overDoes not exist on touch. Never the only cue.
Focus visibleKeyboard focusMandatory. WCAG 2.4.7, with appearance requirements in 2.4.11.
Active or pressedDuring the pressBrief. Confirms the input was received.
SelectedPersistent choiceMust differ from hover and from focus.
DisabledUnavailableExplain why. Frequently fails contrast, so do not rely on it alone.
LoadingOperation in progressPrevent double submission and announce to assistive technology.
ErrorValidation failureNeeds text, not only colour.
Read-onlyViewable, not editableDifferent from disabled: content should still be selectable.

Combined states are where bugs live

  • Selected and disabled together.
  • Focused and in error together.
  • Hovered and loading together.
  • Selected and hovered, where the two treatments can cancel out.
  • Specify the precedence order explicitly, or each implementation will invent its own.

In practice

Disabled buttons with no explanation

Forms

A disabled submit button tells the user nothing about what is missing. Either keep it enabled and show specific errors on submission, or state the blocking condition next to it.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.