Skip to content
UX Atlas
Design systemCraft conventionIntermediate

Component Anatomy, States and Variants

A component is finished when its parts, its states and the reason each variant exists are all written down.

Definition

Anatomy names the parts of a component. States describe how each part responds to interaction and context. Variants are the deliberate alternatives. Undocumented, all three get reinvented by whoever needs them next.

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

On this page
  1. Definition
  2. The specification checklist
  3. Keeping the set honest
  4. In practice
  5. Continue from here

The specification checklist

AspectWhat to defineCommon omission
AnatomyRequired and optional parts, and their orderOptional parts nobody knew were optional.
StatesDefault, hover, focus, active, selected, disabled, loading, error, read-onlyFocus and read-only, almost always.
VariantsEach alternative plus the condition for choosing itVariants with no stated difference in meaning.
SizesThe scale and what each size is forA size added for one screen and kept forever.
Content limitsMinimum and maximum content, and wrapping behaviourBehaviour with a very long label, or none.
Accessibility contractRole, name, keyboard behaviour, announced stateState changes that are visual only.

Keeping the set honest

Do

  • Give each variant a meaning, not a look: destructive, not red.
  • Document the decision rule between neighbouring variants in one sentence.
  • Specify what happens with the longest realistic content and with none at all.
  • Treat read-only and disabled as different states, because they mean different things.

Do not

  • Do not add a variant for a single screen. Style it locally, and promote it if it recurs.
  • Do not let a variant set grow past what a designer can hold in memory. Beyond about five, nobody chooses correctly.
  • Do not express state with colour alone.
  • Do not spec a hover state without specifying its touch equivalent.

In practice

Read-only versus disabled

A disabled field says 'you cannot change this now'. A read-only field says 'this value is fixed'. Rendering both at 40 percent opacity makes a permanent value look like a temporary block, and generates support questions about how to enable it.

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.

Related concept

Connected closely enough to change how you apply this.