States & Variants
The different states a component can be in — hover, active, disabled, loading, error, and more.
Terms in this category
Disabled State
The visual appearance of an element when it cannot be interacted with, typically shown with reduced opacity and without hover effects.
interactive-statesError State
The visual appearance of an element when an error has occurred, typically shown with red color and an error message explaining what went wrong.
interactive-statesFocus State
The visual appearance of an element when it receives keyboard focus, typically shown as an outline or ring, crucial for accessibility and keyboard navigation.
interactive-statesHover State
The visual appearance of an interactive element when a user's cursor is positioned over it, indicating that the element is clickable or interactive.
Loading State
The visual appearance of an element or page while content is being fetched or a process is running, indicating to users that the system is working.
interactive-statesSuccess State
The visual appearance of an element or notification when an action has completed successfully, typically shown with green color and a checkmark icon.
interactive-statesShowing 6 of 15 terms. More coming soon!