Components
Badge
Docs
API 사용가이드입니다. 변형·크기·색상 프리뷰는 Overview를 참고하세요.
API
Badge는 children으로 레이블을 표시합니다. variant로 시각 강도(solid · subtle · soft)를, size로 크기를, color 또는 status로 색을 제어합니다.
import { Badge } from "@/components/badge";
<Badge variant="solid">New</Badge>
<Badge variant="subtle" color="var(--surface-primary)">Beta</Badge>
{/* soft 기본 = primary */}
<Badge variant="soft">Primary</Badge>
<Badge variant="soft" status="fail">실패</Badge>
{/* soft 커스텀 — 텍스트색 + 동일 색 틴트 배경 */}
<Badge variant="soft" status="var(--text-primary)">Token</Badge>
<Badge variant="soft" status="#059669">Hex</Badge>
<Badge variant="soft" status="rgba(5, 150, 105, 1)">RGBA</Badge>Props
| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | React.ReactNode | — | 뱃지 레이블 텍스트. |
variant | "solid" | "subtle" | "soft" | "solid" | 시각 스타일. solid는 채움, subtle은 텍스트만, soft는 틴트입니다. |
size | "medium" | "large" | "medium" | 뱃지 크기(패딩·타이포). className에 px-* · text-[12px] · text-sm 등이 있으면 size 기본 클래스는 생략됩니다. |
color | string | — | 커스텀 배경색(solid) 또는 보더·텍스트 색(subtle). soft에서는 status를 사용합니다. |
status | "primary" | "fail" | "success" | "warning" | string | "primary" | soft variant 색. 프리셋 또는 CSS 변수·hex·rgba 등. 커스텀 시 텍스트색으로 쓰고 배경은 동일 색 틴트(color-mix)입니다. |
className | string | — | 추가 클래스. px-* · text-* (크기) · font-* 가 있으면 size prop 기본보다 우선합니다. |
Notes
- 소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx.
- clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
- 비인터랙티브입니다. 클릭·호버 액션이 필요하면 Button · Chip 패턴을 사용하세요.
- soft의 status 프리셋은 primary · fail · success · warning입니다. 생략 시 primary.
- soft에 임의 색을 넘기면 텍스트는 그 색, 배경은 color-mix(16% 틴트)로 적용됩니다.
- color 미전달 시 solid는 --surface-primary, subtle은 기본 뉴트럴 토큰을 사용합니다.
- 크기 커스텀 예: className="px-3 text-[11px] font-medium" — size prop 박스·타이포 기본값을 쓰지 않습니다.