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>

Available states

Default theme includes a set of useful states.

State PrefixCSS Scope
motionSafe@media (prefers-reduced-motion: no-preference)
motionReduce@media (prefers-reduced-motion: reduce)
first&:first-child
last&:last-child
odd&:odd
even&:even
visited&:visited
checked&:checked
hover&:hover
focus&:focus
focusVisible&:focus-visible
focusWithin&:focus-within
active&:active
disabled&:disabled, &[aria-disabled=true]
placeholder&::placeholder

Customizing states

You can completely customize states in your theme:

// theme.js export const theme = { states: { firstLetter: '&::first-letter', dark: '.xstyled-color-mode-dark &', }, }
Edit this page on GitHub