Action Swap Button

Pro

A button whose label and icon swap on click. Pulse mode reverts back on its own (a confirmation like 'Copied!'); toggle mode stays swapped until clicked again (a persistent state like light/dark) — switch between them with the mode prop.

pnpm dlx shadcn@latest add @ditherui/action-swap-button

Pulse — reverts on its own

Toggle — stays until clicked again

Colored — toggle + activeClassName

Props

PropTypeDefault

mode"pulse" | "toggle""pulse"

idleLabelReact.ReactNode—

activeLabelReact.ReactNode—

idleIconReact.ReactNode—

activeIconReact.ReactNode<CheckIcon />

resetAfternumber1600

activeClassNamestring—

activeboolean—

defaultActivebooleanfalse

onActiveChange(active: boolean) => void—

When to use the button

Use these buttons for primary and secondary actions where plain color changes feel flat. Variants cover gradient calls to action, bevel, emboss and stitched looks, blur on hover, and a button that swaps its label to confirm an action.

Run the shadcn CLI with the name of the button variant you want. Each variant is its own source file you own.

Action Swap Button

Props

When to use the button

Suggested components