Adobe Logo

Spectrum

States

A state communicates the status or potential of a component or an interactive item to the user.

Example of four states of an action button with a placeholder icon, label Action. Default, hover, down, and keyboard focus states.

Types of states#

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.

Key example of an accent button, label Action and action button with a placeholder icon, label Action. Both are in default state.

Default#

This is the default state of a component or item when not interacted with.

Key example of an accent button, label Action and action button with a placeholder icon, label Action, each in its hover state with an arrow cursor hovering over them in the bottom right corner.

Hover#

A hover state is initiated by the user and appears when the user places their cursor over an interactive item.

Key example of an accent button, label Action and action button with a placeholder icon, label Action, each in its down state with an arrow cursor over them in the bottom right corner.

Down#

A down state is initiated by the user and communicates when an interactive item is pressed (by a cursor, stylus, or finger).

Key example of an accent button, label Action and action button with a placeholder icon, label Action, each in its keyboard focus state. The accent button has a detached 2-pixel blue ring around it, while the action button has a blue 2-pixel border.

Keyboard focus#

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.

Key example of an accent button, label Action and action button with a placeholder icon, label Action, both in their disabled state.

Disabled#

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.

Key example of a selected emphasized action button with a placeholder icon, label Action, selected emphasized checkbox, label Label.

Selected#

A selected state is initiated by a component option. It is used to communicate a user’s choice.

Key example of a tree view with 2 parent tree view items. The second parent tree view item is expanded to show 2 child tree view items. This parent tree view item is being dragged to be reordered higher in the hierarchy, with a closed hand cursor that appears over the item.

Dragged#

A dragged state is initiated by a component option. It is used to communicate when something is pressed and moved.

Key example of text field in its error state, label Password. Help text error message, Create a password with at least 8 characters. A red border is applied to the field with an alert icon to communicate the error.

Error#

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.