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
Hover
Down

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

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

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.