Component states

Component states are the conditional visual treatments a component takes on in response to interaction or context — default, hover, focus, active, disabled, loading, error, selected. They're not variants (which are intentional configurations); they're transitions every interactive component needs.

Forgetting one state — usually focus — is the most common accessibility failure in design systems. WCAG 2.4.7 requires a visible focus indicator on every focusable element; "no outline" CSS without a replacement is the wrong default. Pair each state with component tokens (button-bg-hover, button-border-focus) so themes and dark mode propagate correctly.

Related: Component · Variants · Component tokens · WCAG · Accessible design