Button

Displays a button or a component that looks like a button.

variant

default

destructive

outline

secondary

ghost

link

size

default

icon

icon-sm

icon-lg

children

#Installation

bunx --bun barefoot add button

#Usage

Link Button

1import { Button } from "@/components/ui/button"23function ButtonDemo() {4  return (5    <div className="flex flex-wrap gap-2">6      <Button>Default</Button>7      <Button variant="destructive">Destructive</Button>8      <Button variant="outline">Outline</Button>9      <Button variant="secondary">Secondary</Button>10      <Button variant="ghost">Ghost</Button>11      <Button variant="link">Link</Button>12      <Button size="sm">Small</Button>13      <Button size="lg">Large</Button>14      <Button asChild>15        <a href="#">Link Button</a>16      </Button>17    </div>18  )19}

#Examples

#Size

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

#Icon

1<Button size="icon-sm" aria-label="Add">2  <PlusIcon />3</Button>4<Button size="icon" aria-label="Add">5  <PlusIcon />6</Button>7<Button size="icon-lg" aria-label="Add">8  <PlusIcon />9</Button>

#As Child

Go Home

<Button asChild>
  <a href="/">Go Home</a>
</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 with button styling instead of <button>.
children	Child	-	The content of the button.