Updated: June 7, 2024

Interaction States

Intro

Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time.

Variants

The following interaction states are available:



Regular

The regular state is the default state. The component is shown in the regular visual state if the user isn’t interacting with it. It can also be focusable.



Button - regular state
Button - regular state
Input - regular state
Input - regular state

Hover

The hover state shows that the cursor of a pointing device is currently placed on a component that is in an enabled state.

The hover state isn’t available if the component is used with keyboard and touch devices.

  Don’t Use:

  • If you need to provide additional information for a component. The hover state is only available for some interaction devices. When using other devices, the information is lost.


Button - hover state
Button - hover state
Input - hover state
Input - hover state

Down

The down state is displayed while the user is activating or triggering the element. The down state is only applied while the user is clicking and has not yet released the mouse. After the action has been performed and the user has released the mouse, the down state is removed.

Down, pressed, or active states are similar in meaning and are used in different contexts, depending on the component.



Button - down state
Button - down state
Input - down (active) state
Input - down (active) state

Related Links

Guidelines