The different looks a component takes on as a user interacts with it — such as default, hover, focus, active/pressed, selected, and disabled. A design system defines each so the same control looks and behaves consistently everywhere.
Synonyms
- component states
- ui states
Related terms
In plain words
- how a button looks when it's normal, hovered, clicked, or switched off
Usage example
The design system specifies all five interactive states for the toggle, including its disabled look.
Don't confuse with…
- empty stateInteractive states are how one control looks as you use it; an empty state is a whole screen shown when there's no content yet.
Categories
- Design systems