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 draw an emphasis ring over the border. It composes with any variant, is CSS-only (a masked ::after ring), follows the primary colour, so a tone or an accent carries through, and respects prefers-reduced-motion. The ring rests still and turns while hovered or focused.

Each skin draws it its own way: a turning gradient in the default look, a still accent ring that brightens in soft, a hairline with a halo in paper, an outline set off the edge in material, and a spectrum that gathers under the pointer in glass.

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

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

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

--flx-ui-glow-width sets the ring's width (default 2px) and --flx-ui-glow-speed the time of one turn (default 3s).

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.