Interaction States

Add styles to your elements based on their state

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 Visual Inspector. Pressing on the '+' icon will open a dropdown with all possible state options based on the selected element's type.

Styling an element in different states

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.

Adding interaction states to element

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.

Selecting and editing element state

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.

Viewing interaction states in advanced panel

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.

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.

Preview your interaction states

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.

How to delete an interaction state

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.
Was this article helpful?
Cancel
Thank you!