Copy to clipboard
<Button>Button</Button>
<Button>Button</Button><Button>Button</Button>
Installation
Copy to clipboard
npx bearnie add button
npx bearnie add buttonnpx bearnie add button
bunx bearnie add button
bunx bearnie add buttonbunx bearnie add button
pnpm dlx bearnie add button
pnpm dlx bearnie add buttonpnpm dlx bearnie add button
yarn dlx bearnie add button
yarn dlx bearnie add buttonyarn dlx bearnie add button
Usage
import { Button } from "@/components/bearnie/button"<Button>Button</Button>Examples
Secondary
Copy to clipboard
<Button variant="secondary">Secondary</Button>
<Button variant="secondary">Secondary</Button><Button variant="secondary">Secondary</Button>
Outline
Copy to clipboard
<Button variant="outline">Outline</Button>
<Button variant="outline">Outline</Button><Button variant="outline">Outline</Button>
Ghost
Copy to clipboard
<Button variant="ghost">Ghost</Button>
<Button variant="ghost">Ghost</Button><Button variant="ghost">Ghost</Button>
Link
Copy to clipboard
<Button variant="link">Link</Button>
<Button variant="link">Link</Button><Button variant="link">Link</Button>
Destructive
Copy to clipboard
<Button variant="destructive">Destructive</Button>
<Button variant="destructive">Destructive</Button><Button variant="destructive">Destructive</Button>
Success
Copy to clipboard
<Button variant="success">Success</Button>
<Button variant="success">Success</Button><Button variant="success">Success</Button>
Warning
Copy to clipboard
<Button variant="warning">Warning</Button>
<Button variant="warning">Warning</Button><Button variant="warning">Warning</Button>
Info
Copy to clipboard
<Button variant="info">Info</Button>
<Button variant="info">Info</Button><Button variant="info">Info</Button>
With left icon
Copy to clipboard
<Button>
<HugeIcon icon={Mail01Icon} slot="left-icon" />
Login with Email
</Button>
<Button>
<HugeIcon icon={Mail01Icon} slot="left-icon" />
Login with Email
</Button><Button>
<HugeIcon icon={Mail01Icon} slot="left-icon" />
Login with Email
</Button>
With right icon
Copy to clipboard
<Button>
Continue
<HugeIcon icon={ArrowRight01Icon} slot="right-icon" />
</Button>
<Button>
Continue
<HugeIcon icon={ArrowRight01Icon} slot="right-icon" />
</Button><Button>
Continue
<HugeIcon icon={ArrowRight01Icon} slot="right-icon" />
</Button>
Icon only
Copy to clipboard
<Button iconOnly variant="outline">
<HugeIcon icon={ArrowRight01Icon} />
</Button>
<Button iconOnly variant="outline">
<HugeIcon icon={ArrowRight01Icon} />
</Button><Button iconOnly variant="outline">
<HugeIcon icon={ArrowRight01Icon} />
</Button>
Pill
Copy to clipboard
<Button pill>Pill Button</Button>
<Button pill>Pill Button</Button><Button pill>Pill Button</Button>
Loading
Copy to clipboard
<Button disabled>
<HugeIcon icon={Loading03Icon} slot="left-icon" class="animate-spin" />
Please wait
</Button>
<Button disabled>
<HugeIcon icon={Loading03Icon} slot="left-icon" class="animate-spin" />
Please wait
</Button><Button disabled>
<HugeIcon icon={Loading03Icon} slot="left-icon" class="animate-spin" />
Please wait
</Button>
Sizes
Copy to clipboard
<div class="flex items-center gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>
<div class="flex items-center gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div><div class="flex items-center gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>
As link
Copy to clipboard
<Button href="/docs">Documentation</Button>
<Button href="/docs">Documentation</Button><Button href="/docs">Documentation</Button>
Anatomy
Button- A single interactive element with slots for icons
Props
Button
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | destructive | outline | secondary | ghost | link | success | warning | info | default | Visual style variant |
| size | xs | sm | default | lg | xl | default | Button size |
| iconOnly | boolean | false | Square button for icon-only use |
| pill | boolean | false | Renders with fully rounded corners |
| href | string | - | Renders as anchor link |
| disabled | boolean | false | Disables the button |
| class | string | - | Additional CSS classes |