The distinct visual and behavioral condition of a UI component at a specific moment — such as default, hover, focus, active, disabled, loading, and error states. Designing all relevant states for every interactive component prevents visual and functional gaps in the implemented product, since a component undefined in edge states creates a jarring, incomplete experience.
Common contexts
- Specifying all seven states of a primary button before handing off to development
- Discovering in QA that a form field has no error state defined, causing engineers to improvise inconsistently
- Adding a loading and empty state to a data table component that was previously only designed for the populated case
Use when
Design all component states before any component enters the development sprint — particularly error, empty, loading, and disabled states that are often skipped in initial design files. A state audit checklist at handoff prevents engineers from making ad hoc decisions that diverge from the design system.
Avoid when
Don't get stuck designing theoretically possible states that will never occur in production — mapping out 15 states for a component that only has 3 real-world conditions adds documentation overhead without value. Work with engineering to identify which states actually need to be designed versus handled programmatically.
The most consequential component states are the ones designers skip because they assume developers will figure it out — they will, just not consistently, and inconsistency is the quietest enemy of a design system.
Real-world examples
- Google's Material Design documents five interactive states for components—enabled, hovered, focused, pressed, and disabled—with distinct visual treatments for each.
- Figma's own design system defines component states within its component library using variants, allowing designers to switch between default, hover, active, and error states in prototypes.
- Shopify's Polaris system specifies loading, empty, error, and success states for each component so developers and designers handle all edge cases consistently across the admin UI.