EN 35k 9

Button

사용자 입력에 페이지 전체로 응답하는 버튼

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

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

사용자가 호버하거나 클릭하면 버튼은 그대로 유지되고 주변 페이지가 미세하게 반응합니다. 입력 피드백을 환경 전체의 변화로 표현해 사용자의 인지 부담을 분산시킵니다.

설치

pnpm add @chadcn/ui
 
import { Button } from "@chadcn/ui/button/page"

커서

Tailwind v4는 버튼 컴포넌트의 기본값을 cursor: pointer에서 cursor: default로 변경했습니다.

포인터 커서를 유지하려면 CSS 파일에 다음 코드를 추가하세요.

globals.css 
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

예제

크기

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

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

export function ButtonSize() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button size="xs">Extra Small</Button>
      <Button size="xs" variant="outline"><ArrowUpRightIcon /></Button>
      <Button size="sm">Small</Button>
      <Button size="sm" variant="outline"><ArrowUpRightIcon /></Button>
      <Button size="default">Default</Button>
      <Button size="default" variant="outline"><ArrowUpRightIcon /></Button>
      <Button size="lg">Large</Button>
      <Button size="lg" variant="outline"><ArrowUpRightIcon /></Button>
    </div>
  )
}

기본

import { Button } from "@chadcn/ui/button/page"

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

아웃라인

import { Button } from "@chadcn/ui/button/page"

export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>
}

보조

import { Button } from "@chadcn/ui/button/page"

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

고스트

import { Button } from "@chadcn/ui/button/page"

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

위험

import { Button } from "@chadcn/ui/button/page"

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

링크

import { Button } from "@chadcn/ui/button/page"

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

아이콘

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

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

아이콘 포함

올바른 간격을 위해 아이콘에 data-icon="inline-start" 또는 data-icon="inline-end" 속성을 추가하세요.

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

export function ButtonWithIcon() {
  return (
    <Button>
      <GitBranchIcon data-icon="inline-start" />
      New Branch
    </Button>
  )
}

둥근 버튼

완전히 둥근 버튼을 만들려면 rounded-full 클래스를 사용하세요.

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

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

자식 요소로

<Button />의 asChild prop을 사용하면 다른 컴포넌트를 버튼처럼 보이게 할 수 있습니다. 아래는 버튼처럼 보이는 링크 예시입니다.

Login 
import { Button } from "@chadcn/ui/button/page"

export function ButtonAsChild() {
  return (
    <Button asChild>
      <a href="/login">Login</a>
    </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”
asChildbooleanfalse