GitHub

Button

버튼 또는 버튼처럼 보이는 컴포넌트를 표시합니다.

examples/krds/button-demo.tsx
import { ArrowUpIcon } from "lucide-react"

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

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/button.json

사용법

import { Button } from "@/components/ui/button"
<Button variant="outline">Button</Button>

KRDS 정렬

  • 분류: 기존 shadcn button primitive를 유지하는 KRDS-styled 컴포넌트입니다. Button, buttonVariants, asChild 사용 방식은 shadcn 패턴과 호환됩니다.
  • KRDS 적용: default는 KRDS primary 버튼으로 렌더링되며 primary, tertiary, text는 기존 variant를 깨지 않는 추가 alias/확장입니다.
  • 사용 권장: 아이콘 버튼과 인라인 아이콘 간격은 기존 예제처럼 data-icon="inline-start" 또는 data-icon="inline-end"로 명시하세요.

커서

Tailwind v4는 Button에 대해 기본 커서를 cursor: default로 둡니다.

cursor: pointer 동작을 유지하려면 CSS 파일에 다음 코드를 추가하세요.

이 옵션은 프로젝트 설정 단계에서도 pointer cursor 옵션으로 활성화할 수 있습니다.

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

예제

Size

size prop으로 Button 크기를 변경합니다.

examples/krds/button-size.tsx
import { ArrowUpRightIcon } from "lucide-react"

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

Default

examples/krds/button-default.tsx
import { Button } from "@/components/ui/button"

export default function ButtonDefault() {

Outline

examples/krds/button-outline.tsx
import { Button } from "@/components/ui/button"

export default function ButtonOutline() {

Secondary

examples/krds/button-secondary.tsx
import { Button } from "@/components/ui/button"

export default function ButtonSecondary() {

Ghost

examples/krds/button-ghost.tsx
import { Button } from "@/components/ui/button"

export default function ButtonGhost() {

Destructive

examples/krds/button-destructive.tsx
import { Button } from "@/components/ui/button"

export default function ButtonDestructive() {

KRDS의 텍스트 링크는 Button의 variant="link"로 통합되었습니다. 별도의 Link 컴포넌트는 호환을 위해 남아 있지만 새 코드는 <Button variant="link" asChild> 패턴을 사용하세요.

<Button variant="link" asChild>
  <a href="/notice">공지사항 바로가기</a>
</Button>

외부 링크에는 target="_blank"와 rel="noreferrer"를 명시하고, 시각적 표시를 위해 인라인으로 외부 링크 아이콘을 추가합니다.

import { ExternalLinkIcon } from "lucide-react"

<Button variant="link" asChild>
  <a href="https://www.krds.go.kr" target="_blank" rel="noreferrer">
    KRDS 가이드라인
    <ExternalLinkIcon aria-label="새 창 열림" />
  </a>
</Button>

KRDS 텍스트 컬러 톤(기본/본문/약함)이 필요할 때는 className으로 토큰을 적용합니다.

톤className
기본(파랑)(variant 기본값)
본문 톤text-foreground hover:text-[var(--krds-light-color-link-hover,#0b50d0)]
약함text-muted-foreground hover:text-foreground
항상 밑줄underline
examples/krds/button-link.tsx
import { Button } from "@/components/ui/button"

export default function ButtonLink() {

Icon

examples/krds/button-icon.tsx
import { CircleFadingArrowUpIcon } from "lucide-react"

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

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

examples/krds/button-with-icon.tsx
import { GitBranchIcon as IconGitBranch } from "lucide-react"

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

Rounded

rounded-full 클래스로 Button을 둥글게 만듭니다.

examples/krds/button-rounded.tsx
import { ArrowUpIcon } from "lucide-react"

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

Spinner

버튼 안에 <Spinner /> 컴포넌트를 렌더링해 로딩 상태를 표시합니다. 올바른 간격을 위해 스피너에 data-icon="inline-start" 또는 data-icon="inline-end" 속성을 추가하세요.

examples/krds/button-spinner.tsx
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

Button Group

To create a button group, use the ButtonGroup component. Button Group documentation for more details.

examples/krds/button-group-demo.tsx
"use client"

import * as React from "react"

As Child

<Button />의 asChild prop으로 다른 컴포넌트를 버튼처럼 렌더링할 수 있습니다. 링크를 버튼 형태로 표시하는 예시는 다음과 같습니다.

examples/krds/button-aschild.tsx
import Link from "next/link"

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

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/button-rtl.tsx
"use client"

import { ArrowRightIcon, PlusIcon } from "lucide-react"

API 참조

Button

Button 컴포넌트는 button 요소 위에 KRDS 스타일과 공통 동작을 얹는 래퍼입니다.

속성타입기본값
variant"default" | "primary" | "secondary" | "outline" | "tertiary" | "ghost" | "text" | "destructive" | "link""default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"
asChildbooleanfalse