Learning Design Systems Course index

Reference 0003

Component State Matrix

A reusable checklist for thinking about components as behavior contracts, not static pictures.

State typeQuestions to askButton example
AvailabilityCan the user use it now?Enabled, disabled, loading.
InteractionWhat is happening under pointer or keyboard?Hover, focus, pressed.
SelectionIs it currently chosen or toggled?Selected, unselected, aria-pressed.
ValidationIs something wrong, successful, or incomplete?Error, success, warning.
PermissionIs this hidden, visible, blocked, or explainable?Upgrade required, read-only, unavailable.
AsyncWhat happens while work is pending?Submitting, retrying, optimistic update.

Rule of thumb

If a state changes what the user can do, understand, or recover from, it is part of the component contract.