Button
Displays a button or a component that looks like a button.
12import { Button } from "@/components/ui/button"3import { PlusIcon } from "@/components/ui/icon"45function ButtonExample() {6 return (7 <div class="flex flex-wrap items-center gap-2 md:flex-row">8 <Button variant="outline">Button</Button>9 <Button variant="outline" size="icon" aria-label="Submit">10 <PlusIcon size="sm" />11 </Button>12 </div>13 )14}15 #Installation
bunx --bun barefoot add button#Examples
#Variants
12<Button variant="default">Default</Button>3<Button variant="secondary">Secondary</Button>4<Button variant="destructive">Destructive</Button>5<Button variant="outline">Outline</Button>6<Button variant="ghost">Ghost</Button>7<Button variant="link">Link</Button>8#Sizes
1<Button size="sm">Small</Button>2<Button size="default">Default</Button>3<Button size="lg">Large</Button>4<Button size="icon">5 <PlusIcon size="sm" />6</Button>#Disabled
1<Button disabled>Disabled</Button>2<Button variant="outline" disabled>Disabled</Button>#Interactive
1const [count, setCount] = createSignal(0)2<Button onClick={() => setCount(n => n + 1)}>3 Clicked {count()} times4</Button>#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | destructive | outline | secondary | ghost | link | 'default' | The visual style of the button. |
| size | default | sm | lg | icon | icon-sm | icon-lg | 'default' | The size of the button. |
| asChild | boolean | false | Render child element instead of button |