Skip to content
Vy logo


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.


This is the default state of all components when they are not changed by the system or user.

Default state


When the user moves the mouse pointer over the component, it should change to the hover state.

Hover state


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.

Fokus state


Also called Down, onPress or onClick. Active state shows that an interactive component is pressed either with a mouse, stylus or touch.

Active state


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.

Selected state


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.

Disabled state


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.

Error state