Button

意志を示す装置。ユーザーのアクションを呼び起こすための基本的なインタラクティブ要素です。

Variants

用途に応じた6つのバリエーション

TSX

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="danger">Danger</Button>

Sizes

コンテキストに合わせた4つのサイズ

With Icons

アイコンとの組み合わせ

TSX

<Button variant="secondary">
  続ける <ArrowRight className="h-4 w-4" />
</Button>

States

Props

Prop	Type	Default	説明
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "danger"`	"primary"	ボタンの見た目
`size`	`"sm" \| "md" \| "lg" \| "icon"`	"md"	ボタンのサイズ
`asChild`	`boolean`	false	子要素にpropsを委譲 (Radix Slot)
`disabled`	`boolean`	false	無効状態