Skip to main content

Interaction states

Interaction states visually reflect the current state of a user interface element. We distinguish between the following states:

Exclusive states​

Rest, hover, active, drag, or disabled states are mutually exclusive, meaning that an interactive element can always only be in one of those states. These states are communicated by a change of color, which is reflected in the naming of our color tokens.

Exclusive states Exclusive states

Rest​

Rest states represent the default visual state of an element. By default, both interactive and non-interactive elements are in their rest state.

Hover​

Hover states communicate that a user’s pointer is currently over an interactive element.

Active​

Active states communicate that a user is pressing an interactive element. Active states can be triggered by any pointing device (mouse, finger, stylus,…), depending on users’ devices.

Drag​

Drag states communicate that a user is moving an interactive element.

Disabled​

Disabled states communicate that a user can’t currently interact with an otherwise interactive element or that an option isn’t available.

Disabling versus hiding elements​

We advise you to always disable elements instead of hiding them. It ensures that users can still explore possible functionalities and capabilities of your app, even though they might be unavailable at the moment. Ensure that it is apparent or explain why an element is disabled.

You may hide elements instead of disabling them if:

  • They contain sensitive data.
  • They don’t provide value for the user.
  • They interrupt the user flow.

Additive states​

Additive states can appear while an element is in rest, hover, active, drag, or disabled state. You can apply additive states to an element simultaneously.

Additive states Additive states

Focus​

Focus states communicate that a user currently focuses on an interactive element with their keyboard. Focus states are indicated with a visually contrasting border inside of an element.

Selected​

Selected states communicate a user’s current selection within a range of options. Selected states are indicated using primary color tokens and an additional indicator (typically, a line or a checkmark-like icon).

Indicating interactivity​

Interactivity can be indicated in multiple different ways:

  • Dotted underlines for an inline text that acts as a trigger for an action.
  • Solid underlines for an inline text that acts as a link.
  • All other elements should be distinguishable from non-interactive elements by position, emphasized text style, or context.
  • Color is not an indicator of interactivity.
Still have questions?
Find answers in the Dynatrace Community