뱃지
상태나 완료를 압축해 보여주는 표시다. 시스템이 부여하는 정적 상태(주문 상태·재고·처리 상태·시스템 분류)에 쓰고, 의미는 톤(색)으로, 강조는 솔리드로 드러낸다. 목록·표에서 한눈에 스캔되도록 라벨은 1~2단어로 짧게, 상태는 과거형(예: 환불됨)으로 쓴다. 사용자가 직접 만들고 지우는 태그·카테고리에는 쓰지 않는다.
상태
초안neutral
검토 중info
완료됨success
보류warning
실패danger
의미는 tone 으로: 같은 상태엔 앱 전체에서 같은 톤을 일관되게 쓴다.
활용 방법
강조 (strong)
기본은 연한 틴트로 조용히. strong 을 주면 꽉 찬 솔리드로 강조한다. 한 화면에서 강조는 절제해 쓴다.
Preview
초안검토 중완료됨보류실패
초안검토 중완료됨보류실패
tsx
<Badge tone="success">완료됨</Badge><Badge tone="success" strong>완료됨</Badge>
아이콘
icon 으로 의미를 한 번 더 보강한다. 아이콘은 라벨 왼쪽에 오고, 색을 안 주면 텍스트 색을 따라간다.
Preview
완료됨예약됨재고 부족
tsx
<Badge tone="success" icon={<Check size={11} />}>완료됨</Badge><Badge tone="warning" icon={<Clock size={11} />}>예약됨</Badge>
크기
표·목록 등 여럿이 모이는 곳엔 sm(기본), 단독으로 강조할 땐 md 를 쓴다.
Preview
신규주의 필요
tsx
<Badge size="sm">신규</Badge><Badge size="md">주의 필요</Badge>
형태 (variant)
pill 은 기본 상태값, soft-square 는 차분한 분류, outline 은 가장 조용한 표시, dot 은 연결·진행 상태에 쓴다.
Preview
검토 중B2B검토 필요온라인장애
tsx
<Badge tone="info" variant="soft-square">B2B</Badge><Badge tone="warning" variant="outline">검토 필요</Badge><Badge tone="success" variant="dot">온라인</Badge>
표 안에서
표 셀에 두면 상태를 한눈에 스캔할 수 있다. 상태 열을 따로 두는 것이 읽기 좋다.
Preview
주문배송결제
#1001배송됨결제됨
#1002준비 중미결제
tsx
<s-table-cell><Badge tone="success">배송됨</Badge></s-table-cell>
언제 쓰지 않나
- · 사용자가 직접 만들고 지우는 태그·카테고리 → 뱃지가 아니라 칩(chip) 계열을 쓴다.
- · 누를 수 있는 동작 → 뱃지는 정적 표시다. 동작은 버튼을 쓴다.
- · 긴 문장 → 뱃지는 줄바꿈 없이 말줄임된다. 1~2단어로 짧게.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | 의미(색): 같은 상태엔 같은 톤을 일관되게 |
| strong | boolean | false | false=연한 틴트, true=꽉 찬 솔리드(강조) |
| variant | "pill" | "soft-square" | "outline" | "dot" | "pill" | 형태: pill=상태값, soft-square/outline=분류, dot=상태 점 |
| size | "sm" | "md" | "sm" | 표·목록엔 sm, 단독 강조엔 md |
| icon | ReactNode | - | 라벨 왼쪽 아이콘(색 미지정 시 텍스트 색을 따름) |
| children | ReactNode | - | 라벨: 1~2단어, 상태는 과거형 권장 |