A customizable button component with different styles based on the provided variant and processing state. Includes an internal Loader component for indicating loading state.
| Name | Type | Default | Description |
|---|---|---|---|
| isProcessing | boolean | false | Indicates if the button is in a processing/loading state. |
| isDisabled | boolean | - | Disables the button when true. |
| variant | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "accent" | "primary" | Specifies the button style. Options include "primary", "secondary", "destructive", "outline", "ghost", and "accent". |
| className | string | - | Additional CSS classes for custom styling. |
| children | React.ReactNode | - | The content inside the button. |
A button component with customizable styles and animations. Includes a CircularAnimation component for visual effects on click and an internal Loader for indicating loading state.
| Name | Type | Default | Description |
|---|---|---|---|
| animationClassName | string | - | Additional CSS classes for the animation effect. |
| isProcessing | boolean | false | Indicates if the button is in a processing/loading state. |
| isDisabled | boolean | - | Disables the button when true. |
| variant | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "accent" | "complementary" | "primary" | Specifies the button style. Options include "primary", "secondary", "destructive", "outline", "ghost", "accent", and "complementary". |
| className | string | - | Additional CSS classes for custom styling. |
| children | React.ReactNode | - | The content inside the button. |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | - | Callback function for button click events. |