Interaction States

Add styles to your elements based on their state

Style an element in a state

On selecting an element, the States section is visible in the Visual Inspector. Pressing on the '+' icon will open a dropdown with all possible state options based on the selected element's type.
The states that we currently support are: hover, active, focus, focus-within, focus-visible, checked, visited and disabled which are based on CSS pseudo-classes. If you want to find out more about what each state is used for you can refer to the official documentation here.
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.Unselecting a state can be done simply by pressing again on the selected state label or by pressing Cancel on the fixed message from the button of the page.
When a state is enabled, any style changes you're making from the Inspector 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.​
You can also add new styles from the Advanced Inspector. A separate section will be created for each existing state where you can easily see, edit or delete styles.
Everyone likes a smooth transition, so 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.

Preview an existing state

The final behaviour 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.

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.

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.