Hover, Focus, & Other States

Using utilities to style elements on hover, focus, and more.

Every prop utilities have several prefixed variants to style hover, focus and other states.

<form>
  <x.input
    border
    borderColor="transparent"
    focusOutline="none"
    focusRing={2}
    focusRingColor="purple-600"
    focusBorder="transparent"
  />
  <x.button
    bg="purple-600"
    hoverBg="purple-700"
    focusOutline="none"
    focusRing={2}
    focusRingColor="purple-600-a50"
  >
    Sign up
  </x.button>
</form>

State variants props are available for all utilities.

Hover

Add the hover prefix to only apply a utility on hover.

<x.button bg="red-500" hoverBg="red-700">
  Hover me
</x.button>

All available states

Here is the complete list of available states on all utilities: