Button

Five variants, four sizes, spring press feedback, an animated loading spinner and in-place success state, a two-step confirm that swaps the label on first click, and a configurable swap direction. Width stays fixed to the longest label.

npx @kznlabs/labsui add button

Variants

Sizes

With icons

Link as button

Async feedback

Two-step confirm & swap

import { Button } from "@/components/ui/button";export function SaveButton({  saving,  saved,}: {  saving: boolean;  saved: boolean;}) {  return (    <Button      variant="outline"      status={saving ? "loading" : saved ? "success" : "idle"}      loadingLabel="Saving…"      successLabel="Saved!"    >      Save    </Button>  );}

import { Button } from "@/components/ui/button";export function DeleteAccount({  status,  onDelete,}: {  status: "idle" | "loading" | "success";  onDelete: () => Promise<void>;}) {  return (    <Button      variant="destructive"      confirmLabel="Yes, delete my account"      loadingLabel="Deleting…"      successLabel="Account deleted"      status={status}      onClick={onDelete}    >      Delete account    </Button>  );}

<Button>

children
ReactNode
Label; its width is reserved so loading and success never resize the button.
confirmLabel
ReactNode
Two-step action: first click swaps the label to this, second click runs onClick.
confirmTimeoutdefault 3000
number
Ms before an armed confirm step resets. Also resets on blur or Esc.
loadingdefault false
boolean
Disables the button and shows a spinner before the label.
loadingLabel
ReactNode
Label shown while loading, with the spinner. Defaults to children.
size
"default" | "sm" | "lg" | "icon"
Height and padding; "icon" is square, so give it an aria-label.
statusdefault "idle"
ButtonStatus
In-place feedback: loading spins, success swaps the label to successLabel.
successLabel
ReactNode
Text shown on status="success", with a check icon. Defaults to "Done".
swapdefault "left"
SwapDirection
Where the old label slides out to on a swap. Default "left".
variant
"default" | "secondary" | "outline" | "ghost" | "destructive"
Fill and emphasis: one primary action per view, destructive for irreversible ones.

Prop	Type	Default
`children` Label; its width is reserved so loading and success never resize the button.	`ReactNode`	—
`confirmLabel` Two-step action: first click swaps the label to this, second click runs `onClick`.	`ReactNode`	—
`confirmTimeout` Ms before an armed confirm step resets. Also resets on blur or Esc.	`number`	`3000`
`loading` Disables the button and shows a spinner before the label.	`boolean`	`false`
`loadingLabel` Label shown while loading, with the spinner. Defaults to `children`.	`ReactNode`	—
`size` Height and padding; "icon" is square, so give it an `aria-label`.	`"default" \| "sm" \| "lg" \| "icon"`	—
`status` In-place feedback: `loading` spins, `success` swaps the label to `successLabel`.	`ButtonStatus`	`"idle"`
`successLabel` Text shown on `status="success"`, with a check icon. Defaults to "Done".	`ReactNode`	—
`swap` Where the old label slides out to on a swap. Default "left".	`SwapDirection`	`"left"`
`variant` Fill and emphasis: one primary action per view, `destructive` for irreversible ones.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	—

type ButtonStatus: "idle" | "loading" | "success"
type SwapDirection: "left" | "right" | "up" | "down"

* required. Every component also takes className.