Interaction States

Foundations / Interaction / States / Interaction States

Intro

Interaction states are handled by the corresponding component directly. A component can have only one interaction state at any given time. The following interaction states are available: regular, hover, and 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, input – regular

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.

Button, input – hover

guideline

The hover state is only available for some devices. Тouch devices don’t support the hover state. If you use the hover state to provide additional information (for example, in a tooltip), this information is lost on touch devices.

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.