systems
State
A live, reactive condition of a component – hover, focus, pressed, disabled, loading – entered and left automatically as the user or the data acts on it.
Now the app is running: a cursor moves over the button, a form becomes invalid, data is still loading. The component’s appearance reacts – live, without anyone redesigning it. States are driven by interaction (hover, focus, pressed) or by data (loading, empty, error, disabled), which is why “this button doesn’t have a disabled state” is a precise, actionable review note and “it looks wrong when greyed out” is not.
States layer independently on top of whichever variant is in use – the two multiply into a grid of appearances, and building that grid once is the system’s whole trick. The data-driven states have names of their own worth knowing: skeleton loading while content arrives, the empty state when there’s nothing to show.