Skip to main content

Interactive states

When you hover over a button, it should look different. When a checkbox is checked, it should show a checkmark. Interactive states let you define these visual variations by naming your variants with state suffixes — Moio handles the switching automatically.

The naming convention​

Interactive states are encoded directly in variant names using colons:

Button           → Default state
Button:hover     → Hover state
Button:active    → Active (pressed) state
Button:hover:active → Both hover and active

The part before the first colon is your base component name. Everything after is a state. You can combine multiple states by adding more colons.

States by behavior​

Different behaviors support different states:

BehaviorAvailable states
button:hover, :active, :hover:active
checkbox:checked, :unchecked, plus :hover variants
radio:checked, :unchecked, plus :hover variants
toggle:on, :off, plus :hover variants
noneNo automatic states

For checkbox and toggle, you typically want at least two base states (checked/unchecked or on/off) plus their hover variants if you want hover feedback.

Order doesn't matter​

Moio normalizes state names alphabetically. These all resolve to the same state:

  • Button:active:hover
  • Button:hover:active

Name them however feels natural — Moio will match them correctly.

The Default state​

A variant without any state suffix is your Default state. In the state menu, it appears as "Default" and is always listed first.

Adding states quickly​

When you select a component set, the Add state menu shows states you haven't created yet. Select one to add a new variant with that state suffix — a fast way to build out all your interaction states without manual naming.

Troubleshooting​

Why is "Add state" missing?​

Select the component set itself, not an instance or child layer. The Add state menu only appears for component sets.

My states aren't switching in preview​

Check that:

  1. The component set has the correct behavior assigned
  2. Your variant names follow the naming convention (base:state)
  3. You're previewing an instance, not the component itself

I named my states differently but they're treated as the same​

Moio normalizes state order. Button:active:hover and Button:hover:active are the same state. This is intentional — it prevents duplicate states from different naming conventions.