Loader Button
A button that transitions through loading, success, and error states with smooth animations. Ideal for form submissions, async actions, and any interaction that needs visual feedback.
Preview
Installation
npx shadcn@latest add "https://flow-kit-beta.vercel.app/r/loader-button.json"API Reference
LoaderButton
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "loading" | "success" | "error" | Required | Controls the current button state |
| children | React.ReactNode | "Submit" | Content shown in the idle state |
| successLabel | React.ReactNode | ✓ Success | Content shown in the success state |
| errorLabel | React.ReactNode | ✗ Error | Content shown in the error state |
| loader | React.ReactNode | <LoadingSpinner /> | Content shown in the loading state |
| className | string | undefined | Additional CSS classes |
| disabled | boolean | state !== "idle" | Override disabled behavior |
Also accepts all standard button HTML attributes via ...props.
LoadingSpinner
A standalone animated spinner with four pulsing bars. Can be used independently or as the default loader inside LoaderButton.