Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Affordance vs. signifiers

The UIs we design often have affordances that are supported by signifiers:
  • A signifier is what tells you something is interactive — for example, a button’s label, shape, and filled background signal that you can click it.
  • An affordance is the actual capability — for example, the button can be clicked.
When we talk about interaction states, each state functions as a signifier or visual cue to signal what kind of interaction is available. Applying them consistently enhances usability, accessibility, and perceived responsiveness. Aura components have built-in interaction states, but it is important to highlight them — both to understand how they function and to guide their use when you design custom interactive elements outside of the design system.

​
States

​
Default (enabled)

The default state, sometimes referred to as enabled, indicates an interactive component or element and uses the default styling. Depending on the element and the attention required, the state may be more or less visually prominent.

​
Hover

A hover state indicates the user’s pointer is positioned over the element. This state reinforces affordance feedback, letting the user know they are close to taking an action. Some elements or components may also use a drop shadow in their hover state to further emphasize that the user can interact with the element.
Hover states cannot be executed on touch devices, so do not rely on this interaction state alone for feedback.

​
Pressed

A pressed state indicates the user is actively clicking or tapping the element. It lets the user know they are currently interacting with the element and validates that the system is responsive and the input is received.

​
Focused

A focused state indicates an element is selected via keyboard navigation (for example, using Tab) or assistive technology. This state is critical for accessibility and non-pointer users and must meet WCAG AA guidelines. See Focus states under Effects for more details.

​
Disabled

A disabled state indicates an element is non-interactive and cannot be used in its current state. It should not respond to hover, focus, or click. Consider providing a reason for its state with a Tooltip.

​
Toggled

A toggled, or selected, state indicates an element represents an on/off or selected/unselected state. This helps the user know their current selection(s) in the UI or a setting (or filter) that has been applied.
Toggled elements can also have hover, pressed, and focused states.
Last modified on May 11, 2026