Interaktionstillstånd
Interaction states are visual representations used to communicate the status of an element.
A loading state communicates a not fully loaded component.
A disabled state communicates a noninteractive component.
An enabled state communicates an interactive element.
A hover state communicates when a user has placed a cursor above an interactive component.
A pressed state communicates a user tap.
A focused state communicates when a user has highlighted a component, using an input method such as a keyboard or voice.
An error state communicates a user or system mistake.
A read-only state communicates when a component can’t be edited by the user.
An on state communicates a toggle between two options.
An off state communicates a toggle between two options.
In most cases the correct focus indicators are set automatically but there might be instances when you need to set focus-visible styles manually. For example, if there are elements or components that need to be able to recieve focus and they are used within a container that has overflow set to hidden or scroll. There are two mixins in the theme that can help you with this:
/**
* Mixin function for focus-visible styles.
*
* @param inset Boolean. Set this to true when the element is inside a container with `overflow: hidden`
* to make sure that the focus outline is sufficiently visible.
* @param isForTextFieldLike Boolean. Set this to true if the element is a text field or similar (like TextFieldButton for example).
* */
...theme.mixins.focusVisibleStyles()
/**
* Mixin to reset the styles set by focusVisibleStyles. Usable for example when you want an element to have
* focus styles, but not the focused element itself. This is not a function, it just returns a CSSProperties object.
* */
...theme.mixins.focusResetStyles