컴포넌트 · 데이터 표시

Badge

상태 · 분류 · 수량을 짧게 표시하는 라벨입니다. 결제 상태는 StatusBadge로 전 플랫폼에서 동일한 라벨과 색을 사용합니다.

Tone × Variant

subtleneutralbrandpositivenegativewarninginfo
solidneutralbrandpositivenegativewarninginfo
outlineneutralbrandpositivenegativewarninginfo
Variant용도
subtle (기본)대부분의 상태 · 분류 표시. 테이블 · 리스트에서 시선을 과하게 끌지 않음
solid주목이 필요한 한두 개 (NEW · 긴급 · 알림 수)
outline보조 분류 · 태그 (채널, 카테고리)

StatusBadge — 결제 상태

상태 이름을 넘기면 라벨과 톤이 자동으로 정해집니다. 새 상태가 필요하면 paymentStatus 매핑에 추가합니다.

결제완료결제대기결제취소환불완료결제실패부분취소
status라벨tone의미
paid결제완료positive승인 완료
pending결제대기warning승인 요청 중 · 가상계좌 입금 대기
cancelled결제취소neutral당일 전체 취소
refunded환불완료info환불 처리 완료
failed결제실패negative승인 거절 · 오류
partial부분취소brand일부 금액 취소

Size · 아이콘 · 점

sm 20md 24lg 28영업 중추천N주문12

사용 규칙

이렇게 하세요

  • 2–6자 이내 명사형
  • 같은 의미는 모든 화면에서 같은 톤
  • 색 외에 점(dot)이나 텍스트로 상태 구분

이렇게 하지 마세요

  • Badge를 버튼처럼 클릭 가능하게 (Chip 사용)
  • 한 행에 solid 뱃지 여러 개
  • 문장형 라벨 (예: 결제가 완료되었습니다)

Props

PropTypeDefault설명
tone"neutral" | "brand" | "positive" | "negative" | "warning" | "info""neutral"의미 색
variant"subtle" | "solid" | "outline""subtle"강조 수준
size"sm" | "md" | "lg""md"20 · 24 · 28px
dotboolean—앞에 상태 점
iconReactNode—앞 아이콘 (12px)