Hover, focus, and other states

Interactive states in Zazz use hover: utility prefixes combined with built-in framework defaults for focus rings, validation, and disabled elements.

Hover

Prefix utilities with hover: to apply styles on pointer hover:

<a class="ui-button hover:bg-primary hover:scale-102">Hover me</a>

<div class="bg-card rounded-md hover:opacity-75 transition">...</div>

Available hover: categories:

• Text color: hover:text-primary and all semantic roles.
• Background: hover:bg-primary, hover:bg-transparent, hover:bg-none.
• Border: hover:border-primary, hover:border-destructive.
• Opacity: hover:opacity-0 to hover:opacity-100.
• Scale: hover:scale-50 to hover:scale-150.

Pair with the transition utility for animated state changes.

Focus

Zazz configures a :focus-visible ring across all interactive elements in _reset.css:

:where(:focus-visible) {
  outline: var(--outline-width) var(--outline-style) var(--ring);
}

To recolor the focus ring in a specific context, override --ring-color:

<form style="--ring-color: var(--destructive)">...</form>

Add the ring utility to apply a persistent focus-style ring to custom elements.

Active states

Define active states in component CSS with :active rather than markup utility classes. Built-in components include active styling by default.

Validation states

Form inputs use :user-invalid, styling fields only after user interaction (on blur or submit):

<div class="ui-field">
  <label data-slot="field-label" for="email">Email</label>
  <input class="ui-input" id="email" type="email" required />
  <p data-slot="field-error">Enter a valid email address.</p>
</div>

The .ui-field component handles label, hint, and error visibility transitions automatically.

Disabled state

Components use :not(:disabled) styling guards. Add the disabled attribute to disable native controls:

<button class="ui-button" data-variant="primary" disabled>Saving...</button>

Data attributes for state

Components expose state and positioning through data attributes: data-state, data-side, and data-align. Transitions are handled in component stylesheets.