Styling element states

If you have a button, link, or other element and want to customize its hover state, you can do so with element states.

Also, if you have an input, and want to customize a specific aspect of it such as its placeholder text style, you can do so with element states as well.

With your element selected, from the Design tab in the right sidebar, select Apply > Element states. A new Element States section will show up where you can define the states (or combinations of states) that you want to target. Once activated, the edits you make will be specific to that page.

Element states overlap a bit with interaction variants, which also let you style things in states. When should you use which?

• Element states are limited to styling only the selected element, but interaction variants let you style any element in the component. If, say, you have a Card component whose hover state should style nested text and image elements, then use interaction variants. (Element states are element-level, and variants are component-level.)
• If the element you are editing is the root element, you won’t see an Element States section in the right sidebar at all. You should instead just use interaction variants.

Have feedback on this page? Let us know on our forum.