States
A component can have one or more states depending on whether it can be interacted with by the user or should show a predefined value. States should make it clear to the user what interaction they can/cannot perform. Read more about states in the documentation for the component you want to use.
Default
This is the default state of all components when they are not changed by the system or user.
Hover
When the user moves the mouse pointer over the component, it should change to the hover state.
Focus
When using keyboard navigation, what the user focuses on should be shown with a separate state. This only applies to components that the user can change or click on.
Active
Also called Down, onPress or onClick. Active state shows that an interactive component is pressed either with a mouse, stylus or touch.
Selected
Choices the user makes can be shown with a selected state. Selected state can either be clickable and then need their own states for hover and active, or it can be inactive until you click on something else.
Disabled
When you need to show that a component is not possible to interact with, use the disabled state. This can be to show that something is no longer available, or that you require another action from the user to make it interactive. For example, that the user must consent before they can continue to the next page.
Error
Error state is used to signal an error. This can be a user-generated error or a system error. There should always be a written explanation of what caused the error.
