āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/stateful-button ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A button that shows a loading state when clicked, and a success state when the action is completed.
button, stateful, loading
Run the following command:
npx shadcn@latest add @aceternity/stateful-button
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| className | string | undefined | Additional CSS classes to apply to the button. Will be merged with default styling. |
| children | React.ReactNode | - | The content to display inside the button (text, icons, etc.) |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void> | undefined | Click handler that triggers the loading ā success animation sequence. Can be async. |
| disabled | boolean | false | Whether the button is disabled |
| type | "button" | "submit" | "reset" | "button" | The button type attribute |
| ...buttonProps | React.ButtonHTMLAttributes<HTMLButtonElement> | - | All other standard HTML button attributes are supported |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā