Button

Installation

npx bearnie add button

import Button from "@/components/ui/button/Button.astro";

Usage

import { Button } from "@/components/ui/button"

<Button>Button</Button>

Examples

Secondary

Outline

Ghost

Link

Destructive

Success

Warning

Info

With left icon

With right icon

Icon only

Loading

<Button disabled>
<LoaderCircle slot="left-icon" class="animate-spin" />
Please wait
</Button>

Sizes

<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

Documentation

Anatomy

Button - A single interactive element with slots for icons

Props

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
href	string	-	Renders as anchor link
disabled	boolean	false	Disables the button
class	string	-	Additional CSS classes