Interaktionstillstånd

Interaction states are visual representations used to communicate the status of an element.

A loading state communicates the content of the element has not fully loaded yet.

A loading state communicates the content of the element has not fully loaded yet.

A disabled state communicates when a component or element isn’t interactive.

A disabled state communicates when a component or element isn’t interactive.

An enabled state communicates an interactive element.

An enabled state communicates an interactive element.

A hover state communicates when a user has placed a cursor above an interactive element.

A hover state communicates when a user has placed a cursor above an interactive element.

A pressed state communicates a user tap.

A pressed state communicates a user tap.

A focus visible state communicates when an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

A focus visible state communicates when an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

A success state communicates a correct user input.

A success state communicates a correct user input.

An error state communicates a user or system mistake.

An error state communicates a user or system mistake.

A read-only state communicates the user can not edit the element.

A read-only state communicates the user can not edit the element.

A selected state communicates a user choice.

A selected state communicates a user choice.

An activated state communicates a highlighted destination, whether initiated by the user or by default.

An activated state communicates a highlighted destination, whether initiated by the user or by default.