Skip to main content
A Button component's hover and active states for each disabled variant, with a + Focused tile to add the focus state
Subframe supports three interaction states:
  • Hover — Mouse over (:hover)
  • Active — Mouse press (:active)
  • Focused — Keyboard focus (:focus-visible)

​
Creating a state

  1. Hover over the variant you want to add a state to
  2. Click +Hover, +Active, or +Focused

​
Modifying states

  1. Select the state you want to modify
  2. Select an element
  3. Modify any property in the Inspector
  4. An override indicator (pink dot) appears next to the property
Inspector showing override with pink dot indicator
To remove a state override, click the pink dot to reset to the default value.

​
Hover states in code

If your element has a hover state, we add cursor-pointer in the generated code:
Last modified on October 8, 2026