Badge

상태·카운트를 나타내는 작은 라벨입니다.

데모

신규진행중보류결제 실패배송 준비중정산 완료

코드

<Badge>신규</Badge>
<Badge variant="secondary">진행중</Badge>
<Badge variant="outline">보류</Badge>
<Badge variant="destructive">
  <XCircleIcon size={12} weight="regular" />
  결제 실패
</Badge>
<Badge variant="secondary">
  <ClockIcon size={12} weight="regular" />
  배송 준비중
</Badge>
<Badge>
  <CheckCircleIcon size={12} weight="regular" />
  정산 완료
</Badge>

사용 규칙

Do

상태를 나타낼 때는 variant를 의미에 맞게 구분해서 사용한다(destructive는 실패·오류).
짧은 라벨(1~4글자)에 사용하고, 긴 문장은 다른 컴포넌트를 쓴다.
아이콘을 곁들일 때는 size=12 내외로 텍스트와 균형을 맞춘다.

Don't

배지 배경색을 className으로 직접 바꿔 variant 의미 체계를 깨지 않는다.
클릭 가능한 액션 버튼 대용으로 Badge를 쓰지 않는다 — Button을 사용한다.