Back to patterns
semantic-state-system
Semantic State System
Define color, text, icon, and behavior for default, focus, disabled, loading, error, success, and empty states.
PatternsRecommended
Intent
Make every reachable state legible and recoverable without relying on color alone or inventing inconsistent local treatments.
Checks
- Provide visible focus and keyboard behavior for every control.
- Pair semantic colors with text, icon, or another non-color cue.
- Give failure states a clear recovery path.
Warnings
- Do not disable actions without making the reason discoverable.
Exceptions
- Unreachable states do not need artificial examples in production UI.