State Prefixes

Apply styles on specific states

Syntax

visual="hover:... focus:... active:..."

Values

Value	CSS Output	Description
hover:	:hover	On hover
focus:	:focus	On focus
active:	:active	On active
disabled:	:disabled	When disabled
visited:	:visited	When visited
first:	:first-child	First child
last:	:last-child	Last child
odd:	:nth-child(odd)	Odd children
even:	:nth-child(even)	Even children

Examples

<button visual="hover:bg:primary focus:outline:primary">Interactive button</button>

Preview

State Prefixes

visual="hover:scale:110" - Apply styles on hover, focus, etc.

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
  <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
</div>