🔘
Button
A versatile button component with multiple variants, sizes, and states for different use cases.
Form
Variants
Primary
Props:
variant="primary"size="md" Secondary
Props:
variant="secondary"size="md" Outline
Props:
variant="outline"size="md" Danger
Props:
variant="danger"size="md" Small
Props:
variant="primary"size="sm" Large
Props:
variant="primary"size="lg" Disabled
Props:
variant="primary"size="md"disabled="true" With Icon
Props:
variant="primary"size="md"icon="true" Props / API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | primary | Button style variant: primary, secondary, outline, danger, link |
size | string | md | Button size: sm, md, lg |
disabled | boolean | false | Disable the button |
href | string | - | Link URL (renders as anchor tag) |
type | string | button | Button type: button, submit, reset |
className | string | - | Additional CSS classes |
Usage
<!-- Basic Button -->
<Button>Click Me</Button>
<!-- With Variant -->
<Button variant="secondary">Click Me</Button>
<!-- With Size -->
<Button size="lg">Click Me</Button>
<!-- As Link -->
<Button href="/page">Go to Page</Button>
<!-- Disabled State -->
<Button disabled>Disabled</Button>