Button

カスタマイズ可能なボタンコンポーネントです。複数のバリアントとサイズをサポートしています。

インストール

npx shadcn@latest add https://your-registry-url.com/r/button.json

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

export default function Example() {
  return <Button>Click me</Button>
}

<Button variant="default">Default</Button>

<Button variant="destructive">Destructive</Button>

<Button variant="outline">Outline</Button>

<Button variant="secondary">Secondary</Button>

<Button variant="ghost">Ghost</Button>

<Button variant="link">Link</Button>

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

Prop	Type	Default	Description
variant	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	ボタンのスタイルバリアント
size	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	ボタンのサイズ
asChild	`boolean`	`false`	Slotコンポーネントとして使用