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 disabled state communicates when a component or element isn’t interactive.
An enabled state communicates 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 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.
An error state communicates a user or system mistake.
A read-only state communicates the user can not edit the element.
A selected state communicates a user choice.
An activated state communicates a highlighted destination, whether initiated by the user or by default.