Flux Button

Async button with idle, loading, and success states.

When the form is ready,Tap

to finish.

Installation

npx shadcn@latest add @iconiq/flux-button

12 props

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.

Defaultdefault

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

successHoldnumber

Default1000

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

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

Defaultdefault

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

type"button" | "submit"

Defaultbutton

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

disabledboolean

Defaultfalse

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.

Notes

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.