Button

버튼 컴포넌트

기본

<Button>Click me</Button>

Variants

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

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

Disabled

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled</Button>

Props

PropTypeDefaultDescription
variantstring"default"버튼 스타일: default, secondary, destructive, outline, ghost, link
sizestring"default"버튼 크기: sm, default, lg, icon
disabledbooleanfalse버튼 비활성화 여부
asChildbooleanfalseSlot으로 렌더링 (Link 등과 함께 사용)

사용 예시

Link와 함께 사용

import Link from "next/link";

<Button asChild>
  <Link href="/dashboard">
    Go to Dashboard
  </Link>
</Button>