Button

Button (버튼)

버튼을 표시하거나 버튼처럼 보이는 컴포넌트를 만들 때 쓰는 컴포넌트예요. 일반 버튼부터 링크처럼 보이는 버튼까지 폭넓게 활용할 수 있어요.

출처: 문서

본문

설치 (Installation)

npx shadcn@latest add button

npm install @radix-ui/react-slot

사용법 (Usage)

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

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

링크 (Link)

buttonVariants 헬퍼를 이용하면 버튼처럼 보이는 링크를 만들 수 있어요.

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

<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>

또는 asChild 속성을 설정하고 링크 컴포넌트를 중첩해서 사용할 수도 있어요.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

예시 (Examples)

Primary

const buttonVariants = cva(
  "inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
)