Interaction states

Add styles to your elements based on states such as: focus, hover or active.

Style an element in a state
Preview state behavior
Deleting an existing state
States and media queries

1. Style an element in a state

On selecting an element, the States section is visible in the Right panel -> Visual tab. Pressing on the '+' icon will open a dropdown with all possible state such as hover, active, focus, focus-within, focus-visible, checked, visited and disabled, which are based on CSS pseudo-classes

When selecting a state from the dropdown list, it will be added in the States section and automatically enabled so you can start editing styles right away. The enabled status is indicated by the purple color of the label and the fixed message at the bottom of the page.

To unselect a state simply press again on the selected state label or press Cancel on the fixed message from the button of the page.

When a state is enabled, any style changes you're making from the Right panel will be added on the selected state. The changes will always be visible in Canvas as long as you have the element and the state selected. The styling changes you make are what users will see when they interact with this element.

When adding a state, we set a 0.3s transition on the element. The transition property will only be interactive when you preview or deploy your website but not in the Canvas.

2. Preview an existing state

The final behavior after applying the states and styles can be checked by going on the Preview button. This will open a new tab where you can inspect the result.

3. Deleting an existing state

On hovering over an existing state, a close button will appear. Pressing on it will delete the state.
Another option is to right click on a state label and choose Delete from the context-menu.

4. States and media queries

Currently, all styles applied on a state are independent and there is no possibility to apply specific state styles on a media query. Likewise, if a media query is enabled and also a state is selected, any changes from Inspector will be added on the selected interaction state, without considering the enabled media query.

Updated on: 12/05/2023