Related content

---

Our principles in practice

Our identity principles guide how we define our foundations to create a better experience for everyone. Here’s how they apply to interaction states:

1. Coherent: They follow universal patterns that are applied consistently to all interactive elements. Multiple states can co-exist within the same interactive component. For example, an element can be selected and hovered simultaneously.
2. Empowering: Their goal is to help people progress throughout the experience.
3. Clear: The transition between states is explicit but kind and elegant. We achieve it by applying gradual changes that enable visual continuity.
4. Inclusive: All our states pass the following WCAG 2.1 standards.

---

Anatomy

Signifiers

Interaction states combine signifiers and signifieds (people’s mental models). Signifiers are tangible elements like color or graphics that are essential to creating meaningful results:

Related content

Elevation effects

We combine a series of shadow effects that provide depth to our interactive elements, highlighting them above the rest of the interface in an elegant way.

These effects are available in Figma and code for quick and easy application and holistic iteration through design tokens.

Related content

---

Behavior

Combining signifiers defines the interaction state output. See the examples below:

---

Types

To create rich states that cover the whole interaction spectrum, we need to understand their different types first:

1. Resting state
2. User-triggered states
3. State properties

Resting state

Represents the visual appearance of an element in its resting state or after being deselected.

User-triggered states

They require a user action, such as holding a mouse pointer over the interactive element target area.

Hovered

Represents any element a user interacts with (for example, with a pointing device) but not yet activated. It's usually triggered when a user hovers the cursor (mouse pointer) over the element.

Focused

Represents any focused element. It’s usually triggered when a user selects it with the Tab key.

Pressed

Represents any active element while pressed. It’s usually triggered when a user hits the interactive target area.

Dragged

Represents any element that is being pressed and moved simultaneously.

State properties

The state of a component can depend on properties set before the user can interact with it. Similarly, their attributes can change before and after the user interaction. Thus, we should be able to combine these state properties with user-triggered states, for example, in an invalid form or a selected navigation item, as they can also be hovered or focused.

Error

Represents any element with invalid content.

Waiting

Represents any element that is loading or retrieving data. It’s usually triggered by hitting a button or landing on a new screen whose contents are not yet loaded.

Disabled

Represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.

Read-only

Represents an element that holds content but can’t be editable by a user. It can’t be focused or activated (selected, clicked on, typed into, etc.).

Selected

Represents elements such as navigation items or toggles that can be preselected by default or toggled by a user.

Checked

Represents any radio, checkbox, or option element that is being checked or toggled.

Indeterminate

Represents any form element whose state is indeterminate, such as checkboxes and radio buttons that are members of a group in which all radio buttons are unchecked.

---

Quality checklist

This element passes the following requirements described in our Component lifecycle.

Accessibility details

This element passes the following WCAG 2.1 standards.