Button

오클릭 방지 기능이 내장된 버튼을 표시합니다.

import { Button } from "@chadcn/ui"
import { ArrowUpIcon } from "lucide-react"

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline">버튼</Button>
      <Button variant="outline" size="icon" aria-label="제출">
        <ArrowUpIcon />
      </Button>
    </div>
  )
}

동작 방식

이 컴포넌트는 shadcn/ui Button과 동일한 props(variant, size, asChild)를 받으며, 오클릭 방지 기능이 내장되어 있습니다. 호버 시 커서에서 멀어지는 방향으로 translate를 사용해 재배치되므로 레이아웃에는 영향을 주지 않습니다. 2번 시도 후 제자리에 머뭅니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Button } from "@chadcn/ui"

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

준비 중패키지가 아직 npm에 게시되지 않았습니다.

커서

기본적으로 버튼 컴포넌트는 호버 시 cursor: pointer를 추가하지 않습니다. 플랫폼 관례에 따라 인터랙티브 요소는 커서를 변경하지 않아야 하기 때문입니다. 포인터 커서를 선호하시면 globals.css 파일에 다음을 추가하세요.

globals.css

@layer base {
  button,
  [role="button"] {
    cursor: pointer;
  }
}

예제

크기

size prop으로 버튼 크기를 변경할 수 있습니다.

import { Button } from "@chadcn/ui"
import { ArrowUpRightIcon } from "lucide-react"

export function ButtonSize() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button size="xs">아주 작게</Button>
      <Button size="xs" variant="outline"><ArrowUpRightIcon /></Button>
      <Button size="sm">작게</Button>
      <Button size="default">기본</Button>
      <Button size="lg">크게</Button>
    </div>
  )
}

기본

import { Button } from "@chadcn/ui"

export function ButtonDefault() {
  return <Button>기본</Button>
}

아웃라인

import { Button } from "@chadcn/ui"

export function ButtonOutline() {
  return <Button variant="outline">아웃라인</Button>
}

보조

import { Button } from "@chadcn/ui"

export function ButtonSecondary() {
  return <Button variant="secondary">보조</Button>
}

고스트

import { Button } from "@chadcn/ui"

export function ButtonGhost() {
  return <Button variant="ghost">고스트</Button>
}

위험

import { Button } from "@chadcn/ui"

export function ButtonDestructive() {
  return <Button variant="destructive">위험</Button>
}

링크

import { Button } from "@chadcn/ui"

export function ButtonLink() {
  return <Button variant="link">링크</Button>
}

아이콘

import { Button } from "@chadcn/ui"
import { CircleFadingArrowUpIcon } from "lucide-react"

export function ButtonIcon() {
  return (
    <Button variant="outline" size="icon" aria-label="업로드">
      <CircleFadingArrowUpIcon />
    </Button>
  )
}

아이콘 포함

data-icon 속성을 사용하여 버튼 내 아이콘 위치를 올바르게 지정합니다.

import { Button } from "@chadcn/ui"
import { GitBranchIcon } from "lucide-react"

export function ButtonWithIcon() {
  return (
    <Button>
      <GitBranchIcon data-icon="inline-start" />
      새 브랜치
    </Button>
  )
}

둥근 버튼

rounded-full 클래스를 추가하여 완전히 둥근 버튼을 만들 수 있습니다.

import { Button } from "@chadcn/ui"
import { ArrowUpIcon } from "lucide-react"

export function ButtonRounded() {
  return (
    <Button className="rounded-full" size="icon" variant="outline">
      <ArrowUpIcon />
    </Button>
  )
}

자식 요소로

asChild prop을 사용하여 링크와 같은 자식 요소로 버튼을 렌더링합니다.

로그인

import Link from "next/link"
import { Button } from "@chadcn/ui"

export function ButtonAsChild() {
  return (
    <Button asChild>
      <Link href="/login">로그인</Link>
    </Button>
  )
}

API 레퍼런스

Button

Button 컴포넌트는 button 요소를 감싸며 다양한 스타일과 기능을 추가합니다.

Prop	타입	기본값
variant	"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"	"default"
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"
asChild	boolean	false