Badge

상태, 카테고리, 알림 개수 등을 표시하는 작은 라벨 컴포넌트입니다.

개요

Badge는 상태, 카테고리, 알림 개수를 표시하는 컴포넌트입니다. Badge, NumberBadge, DotBadge, BadgeGroup 네 가지 종류를 제공합니다.

기본Primary성공경고오류

설치

사용법

Badge, NumberBadge, DotBadge를 import하여 사용합니다. BadgeGroup으로 아이콘에 뱃지를 오버레이할 수 있습니다.

예제

유형

Subtle(연한 배경), Solid(진한 배경), Outline(테두리) 세 가지 스타일을 제공합니다.

SubtleLabelLabelLabelLabelLabelLabelLabel
SolidLabelLabelLabelLabelLabelLabelLabel
OutlineLabelLabelLabelLabelLabelLabelLabel

크기

md, lg 두 가지 크기를 지원합니다. 기본값은 md입니다.

MediumLarge

모양

rounded(기본), pill(둥근), square(직각) 세 가지 모양을 지원합니다.

RoundedPillSquare

아이콘

icon prop으로 아이콘을 추가하고, iconPosition으로 위치를 지정할 수 있습니다.

완료즐겨찾기메일

숫자 뱃지 (NumberBadge)

알림 개수 등 숫자를 표시합니다. max prop으로 최대 표시 숫자를 제한할 수 있습니다.

54299+08

도트 뱃지 (DotBadge)

새로운 알림이 있음을 표시하는 작은 점입니다. pulse prop으로 애니메이션을 추가할 수 있습니다.

기본
성공
펄스
Large

뱃지 그룹 (BadgeGroup)

아이콘이나 아바타에 뱃지를 오버레이합니다. position prop으로 위치를 지정할 수 있습니다.

5
3

접근성

Badge는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

  • 장식적 아이콘: Badge 내 아이콘은 aria-hidden="true"로 스크린리더가 무시합니다.
  • NumberBadge: aria-label로 숫자 정보를 제공합니다 (예: "5개").
  • DotBadge: 순수하게 장식적이므로 aria-hidden="true"가 적용됩니다.
  • 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.