button

Native button with variant/size hooks and reactive press state.

A headless button with unified press behavior and styling hooks.

import { Button } from '@fluixi-ui/button';

<Button variant="solid" size="md" onClick={onClick}>Save</Button>
<Button disabled>Disabled</Button>

• variant — solid | soft | outline | ghost (exposed as data-variant).
• size — sm | md | lg (exposed as data-size).
• Reflects data-disabled and a reactive data-pressed (via @fluixi-ui/primitives press) for styling.
• Forwards ref, type (defaults to button), event handlers and all other props.

Visual styling is supplied by the design tokens / styling layer; the component itself is headless.

Glow (animated gradient border)

Set glow to add an animated gradient border ring. It composes with any variant, is CSS-only (a masked ::after ring driven by a registered @property angle), follows the accent, and respects prefers-reduced-motion. On hover the ring spins faster and blooms in its accent colour.

<Button variant="solid" glow>Launch</Button>

Custom colours — override the gradient stops per-instance with CSS variables:

<Button glow style="--flx-glow-from:#ec4899;--flx-glow-via:#8b5cf6;--flx-glow-to:#06b6d4">
  Gradient
</Button>

You can also set a custom rest speed with --flx-glow-speed (e.g. 6s).

Single edge — glowSide restricts the glow to one edge (top | right | bottom | left, default all). It wraps the corners and tapers up the adjacent sides; on hover the glow slides to the opposite edge.

<Button variant="outline" glow glowSide="bottom">Underglow</Button>

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.