Flux Button

Async button with idle, loading, and success states.

Installation

npx shadcn@latest add @iconiq/flux-button

File Structure

Usage

"use client";

import { Check } from "lucide-react";

import { FluxButton } from "@/components/ui/flux-button";

export function FluxButtonPreview() {
  return (
    <div className="mx-auto max-w-2xl text-center">
      <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-balance font-medium text-lg text-neutral-800 leading-snug tracking-tight sm:text-xl dark:text-neutral-100">
        <span>When the form is ready,</span>
        <span className="font-medium text-foreground">Default</span>
        <span>Tap</span>
        <span className="inline-flex translate-y-px align-middle">
          <FluxButton
            idleLabel="Submit"
            loadingLabel="Submitting"
            successIcon={<Check aria-hidden className="size-4" strokeWidth={2.5} />}
            successLabel="Submitted"
            onAction={async () => {
              await new Promise((resolve) => setTimeout(resolve, 1500));
            }}
            type="button"
            variant="default"
          />
        </span>
        <span>to finish.</span>
      </p>
    </div>
  );
}

Props

Description

FluxButton

idleLabel

Label shown before the action starts.

Type string

loadingLabel

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

Type string

successLabel

Label shown after onAction resolves.

Type string

successIcon

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

Type React.ReactNode

onAction

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

Type () => void | Promise<void>

variant

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

successHold

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

Type number·Default 1000

size

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

Type "xs" | "sm" | "default" | "lg"·Default default

type

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

Type "button" | "submit"·Default button

disabled

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

Type boolean·Default false

className

Optional class names merged onto the root button element.

Type string

onClick

Native click handler forwarded to the underlying button.

Type React.MouseEventHandler<HTMLButtonElement>

Registry bundle

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

When the form is ready,Tap

to finish.