Flux Button

Async button with idle, loading, and success states.

Installation

npx shadcn@latest add @iconiq/flux-button

Async button with idle, loading, and success states, plus b-button visual variants.

idleLabelstring

Required

Label shown before the action starts.

loadingLabelstring

Required

Label shown with the built-in loader while onAction is in progress.

successLabelstring

Required

Label shown after onAction resolves.

successIconReact.ReactNode

Optional icon shown on success. Pass any node, such as a Lucide checkmark. Omit for text-only success.

onAction() => void | Promise<void>

Required

Runs when the button is pressed, drives loading and success states, then returns to idle after successHold.

Default default

Visual style variant. Matches the b-button variant set.

successHoldnumber

Default 1000

Milliseconds to hold the success state before returning to the idle label.

size"xs" | "sm" | "default" | "lg"

Default default

Height and horizontal padding preset. Matches b-button sizes.

type"button" | "submit"

Default button

Native button type. Use submit inside forms; defaults to button so the control does not submit unless you opt in.

disabledboolean

Default false

Native disabled state. Also blocks the action flow while true.

classNamestring

Optional class names merged onto the root button element.

onClickReact.MouseEventHandler<HTMLButtonElement>

Native click handler forwarded to the underlying button.

Built on `@base-ui/react/button` with a Motion render surface, matching the b-button integration pattern.

Locks interaction while loading or showing success without applying disabled opacity, using aria-disabled and pointer-events-none instead.

Motion transitions start only after the first click, so the button renders statically on page load.

Install path is `components/ui/flux-button.tsx` with the `FluxButton` export.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/button, class-variance-authority, lucide-react, motion.

This page documents the Base UI install only. Flux Button builds on the Base UI button primitive.

The generated registry file is /r/flux-button.json.