03 · Components · 표현
배지Badge
짧은 라벨·태그·상태 표시. 대문자 트래킹을 사용해 본문과 구분되는 메타 레이어로 읽히도록 디자인했습니다.
StableWCAG AA
톤
tsx
<div className="flex flex-wrap gap-2">
<Badge tone="neutral">기본</Badge>
<Badge tone="accent">신규</Badge>
<Badge tone="success">완료</Badge>
<Badge tone="warning">주의</Badge>
<Badge tone="danger">오류</Badge>
</div>미리보기
기본신규완료주의오류
변형
tsx
<div className="flex flex-wrap gap-2">
<Badge tone="accent" variant="solid">SOLID</Badge>
<Badge tone="accent" variant="soft">SOFT</Badge>
<Badge tone="accent" variant="outline">OUTLINE</Badge>
</div>미리보기
SOLIDSOFTOUTLINE
배지가 실시간 변화를 알리면 (예: 읽지 않은 알림 수), aria-live="polite"를 감싸는 래퍼에 추가해 스크린리더가 변화를 감지하게 하세요. 정적 라벨에는 불필요합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "accent" | "success" | "warning" | "danger" | "neutral" | 의미에 따른 색 톤. |
variant | "solid" | "soft" | "outline" | "soft" | 배경 채우기 스타일. |
children* | ReactNode | 배지 텍스트. 짧을수록 좋음 (1~3 단어). |