Hover, Focus, & Other States

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

Every prop utilities accepts an object to style hover, focus and other states.

<form>
  <x.input
    border
    borderColor="transparent"
    outline={{ focus: 'none' }}
    ring={{ focus: 2 }}
    ringColor={{ focus: 'purple-600' }}
    border={{ focus: 'transparent' }}
  />
  <x.button
    bg={{ _: 'purple-600', hover: 'purple-700' }}
    outline={{ focus: 'none' }}
    ring={{ focus: 2 }}
    ringColor={{ focus: 'purple-600-a50' }}
  >
    Sign up
  </x.button>
</form>

State objects are available for all utilities.

Hover

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

<x.button bg={{ _: 'red-500', hover: 'red-700' }}>Hover me</x.button>

Using reponsive states

States and breakpoints can be seemlessly mixed, every screens defined in theme are a @media (min-width: ...) state.

<x.button
  bg={{
    _: { _: 'indigo-500', hover: 'indigo-700' },
    md: { _: 'fuchsia-500', hover: 'fuchsia-700' },
  }}
>
  Cameleon button
</x.button>

Combined states

Use nested objects to combine states.

<x.a
  href="#"
  color={{
    _: 'indigo-500',
    hover: 'indigo-600',
    visited: { hover: 'indigo-900' },
  }}
>
  Link
</x.a>

Inline states

Inline your states and breakpoints, &:hover works just like the default theme hover state.

<x.a
  href="#inline-states"
  color={{
    '&': 'indigo-500',
    '&:hover': 'indigo-600',
    '&[href^="#"]': { '&': 'green-500', '&:hover': 'green-600' },
  }}
>
  Link
</x.a>

Available states

Default theme includes a set of useful states.

Customizing states

You can completely customize states in your theme:

// theme.js

export const theme = {
  states: {
    firstLetter: '&::first-letter',
    dark: '.xstyled-color-mode-dark &&',
  },
}