Action Button
An animated action button with character-level spring transitions, drawn checkmark, and morphing width.
Installation
npx viora-ui@latest add action-buttonpnpm dlx viora-ui@latest add action-buttonnpx viora-ui@latest add action-buttonbunx viora-ui@latest add action-buttonStep 1: Install Dependencies
npm install motion lucide-reactStep 2: Copy the Source Code
Copy action-button.tsx into your @/components/arc/action-button/ directory.
Usage
import { ActionButton } from "@/components/arc/action-button/action-button";
export function PublishButton() {
const publish = async () => {
await fetch("/api/publish", { method: "POST" });
};
return (
<ActionButton
label="Publish"
pendingLabel="Publishing"
successLabel="Published"
onAction={publish}
onActionError={(error) => console.error(error)}
/>
);
}Props
| 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. |
disabled | boolean | false | Whether button is disabled. |
Built by Otis
Last updated: 10/12/2026