Button
Versatile button component with multiple styles, sizes, and async support. Perfect for actions, forms, and navigation.
Quick Start
1. Import the component:
import Button, { ButtonStyle } from '@/components/Button';2. Use in your component:
<Button style={ButtonStyle.primary}>
Click Me
</Button>
{/* Async button with loading state */}
<Button
style={ButtonStyle.primary}
onClickAsync={async () => {
await someAsyncOperation();
}}
>
Save Changes
</Button>Button Styles
Various button styles for different contexts and actions
Button States
Disabled and loading states with async operation support
No data
Button Sizes
Multiple size options from x-small to large
or
Buttons with Icons
Combine text and icons for clear action buttons
Icon-Only Buttons
Compact buttons with just icons for toolbar actions
Button Groups
Grouped buttons for segmented controls and related actions
Props Reference
| Prop | Type | Description |
|---|---|---|
| style | ButtonStyle | Button appearance: primary, secondary, tertiary, danger, success, etc. |
| className | string | Additional CSS classes (btn-xs, btn-sm, btn-lg, etc.) |
| disabled | boolean | Disables the button |
| onClickAsync | function | Async click handler with automatic loading state |
| onClick | function | Standard click handler |
| rounded | boolean | Enable/disable rounded corners (default: true) |
| children | ReactNode | Button content (text, icons, or mixed) |