Button
A foundational button component with multiple variants, sizes and states.
Variants
Use the variant prop to change the visual style. The default variant is primary.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>Sizes
Use the size prop to control the button's padding and font size.
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Loading state
Set isLoading to show a spinner and automatically disable the button.
<Button variant="primary" isLoading>Loading</Button>Disabled
Pass the native disabled attribute to prevent interaction.
<Button variant="primary" disabled>Disabled</Button>Full width
Set fullWidth to make the button span its container.
<Button variant="primary" fullWidth>Full width</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'primary' | Visual style of the button |
size | 'sm' | 'md' | 'lg' | 'md' | Controls padding and font size |
fullWidth | boolean | false | Stretches the button to fill its container |
isLoading | boolean | false | Shows a spinner and disables the button |
disabled | boolean | false | Native disabled attribute |
onClick | MouseEventHandler | — | Click handler |
className | string | '' | Additional Tailwind classes |