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
npm install motion lucide-reactAPI 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.