Badge

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {

설치

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

사용법

import { Badge } from "@/components/ui/badge"

<Badge variant="default | outline | secondary | destructive">Badge</Badge>

KRDS 정렬

• 분류: shadcn에 원래 존재하는 badge primitive를 KRDS 스타일로 조정한 shadcn-native 컴포넌트입니다. KRDS 상태/태그 표현을 위한 tone, size, tag variant를 추가로 제공하지만 기본 variant 사용과 asChild composition은 shadcn 패턴과 호환됩니다.
• KRDS 적용: tone, size, tag variant로 KRDS 상태 배지, 숫자 배지, 태그형 affordance를 표현할 수 있습니다. 기존 default, secondary, destructive, outline variant는 유지됩니다.
• 사용 권장: 단순 상태 표시는 tone으로 의미 색을 선택하고, 선택 가능한 태그 UI는 Badge만으로 상태를 관리하지 말고 button/toggle 계열과 함께 조합하세요.

예제

Variants

variant prop으로 배지의 스타일 변형을 변경합니다.

import { Badge } from "@/components/ui/badge"

export function BadgeVariants() {

With Icon

배지 안에 아이콘을 렌더링할 수 있습니다. data-icon="inline-start"는 왼쪽, data-icon="inline-end"는 오른쪽 아이콘에 사용합니다.

import { BadgeCheck, BookmarkIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

With Spinner

배지 안에 스피너를 렌더링할 수 있습니다. 스피너에는 data-icon="inline-start" 또는 data-icon="inline-end" prop을 추가하세요.

import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

Link

asChild prop으로 링크를 배지처럼 렌더링합니다.

import { ArrowUpRightIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

Custom Colors

Badge 컴포넌트에 bg-green-50 dark:bg-green-800 같은 클래스를 추가해 배지 색상을 커스터마이징할 수 있습니다.

import { Badge } from "@/components/ui/badge"

export function BadgeCustomColors() {

RTL

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

"use client"

import * as React from "react"

API 참조

Badge

Badge 컴포넌트는 배지 또는 배지처럼 보이는 컴포넌트를 표시합니다.