Button Component
A flexible button component with multiple variants, sizes, and states. Supports loading indicators and icons.
Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
States
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
With Icons
Note: Icon props require React components. In a real application, you would import icon libraries and pass them as shown in the code example below.
<Button leftIcon={<PlusIcon />}>
Add Item
</Button>
<Button rightIcon={<ArrowRightIcon />}>
Continue
</Button>
Full Width
<Button class="w-full">Full Width Button</Button>
All Combinations
| Variant | Small | Medium | Large |
|---|---|---|---|
| Primary | | | |
| Secondary | | | |
| Outline | | | |
| Ghost | | | |
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'primary' | Visual style variant |
| size | 'sm' | 'md' | 'lg' | 'md' | Button size |
| loading | boolean | false | Shows loading spinner |
| disabled | boolean | false | Disables the button |
| leftIcon | React.ReactNode | undefined | Icon to display on the left |
| rightIcon | React.ReactNode | undefined | Icon to display on the right |
| className | string | undefined | Additional CSS classes |