A state communicates the status or potential of a component or an interactive item to the user.
There are 2 types of states used across Spectrum: states that are initiated by the user (e.g., hovering over a button with a cursor or focusing on an item with a keyboard) and states that are initiated by the component option (e.g., defining a button as disabled).
Not all components will have every state listed here. To learn more about a specific component’s available states and options, view the information on their guidelines page.
This is the default state of a component or item when not interacted with.
A hover state is initiated by the user and appears when the user places their cursor over an interactive item.
A down state is initiated by the user and communicates when an interactive item is pressed (by a cursor, stylus, or finger).
Keyboard focus is initiated by the user and highlights an item when navigated using a keyboard. The keyboard focus state typically takes the component’s visual hover state and adds an additional indication, most commonly a 2 px blue ring around the component.
A disabled state is initiated by a component option. It shows that the item exists, but is not interactive in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later.
A selected state is initiated by a component option. It is used to communicate a user’s choice.
A dragged state is initiated by a component option. It is used to communicate when something is pressed and moved.
An error state is initiated by a component option. It is used to communicate an error made by the system or the user. Most commonly, this means that the item needs to be completed before moving forward or that an input is invalid.
Error states rely on visual and written communication to clarify meaning, and can vary in context and severity.