The LoadingButton component runs one async action and reports on it in place: it swaps to a spinner while the request is open, confirms with a tick when it resolves, and returns to its resting label on its own.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/loading-button.jsonEverything Loading Button accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Resting label, shown when the button is idle |
| onAction | () => void | Promise<void> | No default | The work to run on click. The button stays busy until it settles, and returns to idle if it rejects |
| loadingText | string | Saving | Label shown while the action is in flight |
| successText | string | Saved | Label shown briefly once the action resolves |
| successDuration | number | 1.6 | Seconds the success label stays up before the button returns to idle |
| className | string | '' | Additional CSS classes for styling |
| ...props | ButtonHTMLAttributes | No default | Any other native button props, including onClick, type and disabled |
Required.