An animated action button with character-level spring transitions, drawn checkmark, and morphing width.
Installation
Usage
import { ActionButton } from "@/components/arc/action-button/action-button";
export function PublishButton() {
return (
<ActionButton
label="Publish"
pendingLabel="Publishing"
successLabel="Published"
onAction={publish}
onActionError={error => toast.error(String(error))}
/>
);
}API Reference
ActionButton
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The resting label text. |
| pendingLabel | string | "Saving" | Text shown while the async action resolves. |
| successLabel | string | "Saved" | Text shown upon success with drawn tick. |
| onAction | () => void | Promise<void> | — | Async handler triggered on click. |
| resetAfterMs | number | 2400 | Delay in ms before returning to idle. |
| onActionError | (error: unknown) => void | — | Callback triggered if onAction throws. |
Built by Otis
Last updated: 10/12/2026