States

To add interactivity to your elements, you can change the way they look and behave in different states. As you're styling an element, clicking the States menu lets you select between the various states, like hover and focused, you can access and style.

States

There are four states that you can set for any element:

• None
• Hover
• Pressed
• Focused

You can also style the placeholder state of form fields. Learn more about styling forms and the placeholder state.

For link elements, you can also style the current state and the visited state. See below.

None state

The None state is the default state of elements.

Hover state

The hover state shows when you hover your mouse pointer on an element. It’s not possible to hover on most touch devices so be aware of this when designing for smaller breakpoints.

Pressed state

The pressed or active state is the state that shows when you click or press on an element. This state inherits styles from the hover state as pressed is actually a state of the hover state.

Focused state

It’s possible to focus on certain elements, like input fields in a form, before activating them by pressing the TAB ↹ key on the keyboard. The focused state emulates this state and is often styled for input fields and links.

Visited state

The visited state is the state of a link that's been visited. This state inherits styles from the none state.

Current state

The Current state is automatically added to the class or all links tag of a selected link element when this element is linked to the current page, section, or tab. The Current state inherits all styles from the default "none" state. When you add custom styling on the Current state, it will reflect how your link element looks when a user is on that state.

How can I select the current state of a link?

To access the Current state of any link block, text link, button, nav link:

1. Select your link element and press D to open the link settings
2. Select the page option and choose the current page from the dropdown (if your link is on the home page, select the home page)
3. Press S to go to the style panel. You will see that the green current state is activated in the selector field if you've applied a class to your link. If not, select "all links" from the selector dropdown and the current state will be applied as well.

You can also select the page section option in the link settings. The current state will appear in the selector field for that element when you scroll to that section of the page. This is useful for styling buttons or links that are fixed as you scroll.

Good to know

After you style the current state, you can update the link settings and link your button and link elements to any other pages or page sections.

How can I select the current state of a tab?

To access the Current state for Tab Links, select the Tab Link for the current visible tab and add a class. The Current state will automatically appear. Learn more about styling current Tab Links.

How can I style the default state of a link when the current state indicator is in the selector?

There are several ways to remove the Current state, when you want to style the default state:

• Select the default class in the Inheritance menu

• Temporarily remove the link to the current page/section.
• Duplicate the element, remove the page/section settings, edit the class and then delete the duplicate element when you’re done.

Styling states

When you select a state from the states menu, a green state class, also called pseudo-class, will appear at the end of the selector field. This indicates that you are now styling that state of your element.

You can make any number of styling choices. The styling changes you make here are what users will see when they interact with this element.

Good to know

For the visited state, you can only style the text color, the background color, and the border color. Background color will only appear if it is already set in a different state.

All states inherit styles from the none state. Pressed also inherits styles from the hover state. You can see from where styles are being inherited using the inheritance menu on the right of the selector field.

Whatever state you're in, the changes you make will be visible on the canvas until you deselect or otherwise leave the state.

After you have added styles to a state and open the states menu, you will see blue circles indicating that there are local styles on that state. Orange circles indicate that there are inherited styles.

When you’ve finished styling your states, you can go back to the default none state by doing any of the following:

• Select none from the States menu
• Press the green checkmark icon next to the States menu
• Press ESC on the keyboard (this also deselects the current element)
• Select a different element

Pro tip

Style states of the all links tag if you want the same state styling for all your links.