Badge
Badge는 상태나 수량 등을 간결하게 표시하는 작은 요소입니다.
주 용도는 알림 수나 상태 표시(예: 활성/비활성, 온라인/오프라인 등)이며,
숫자·짧은 텍스트 중심으로 상태를 강조하거나 보조 정보를 제공합니다.
Accessibility
Badge는 시각적으로만 상태를 표현하기 때문에, 스크린리더 사용자를 위해 의미를 제공해야 합니다.
아래 권장 사항을 준수하여 접근성을 확보합니다.
아래 권장 사항을 준수하여 접근성을 확보합니다.
- 배지 자체에 텍스트가 없으면 반드시 대체 텍스트 제공
- 장식용 아이콘에는
aria-hidden="true"적용 - 알림 수량이나 상태 변화를 실시간으로 전달하려면
aria-live속성을 활용
| 패턴 | 설명 | 예시 |
|---|---|---|
| 점 배지 (is-dot) |
단독으로는 의미를 전달할 수 없으므로
aria-label 또는
.visually-hidden 텍스트로 의미를 제공
|
Sizes
| Variants / Size | is-sm | Default (medium) |
|---|---|---|
| is-dot |
Appended & Patterns
배지를 아이콘, 아바타, Chip 등과 함께 사용하는 패턴입니다.
시각적으로 상태를 강조하며, 아이콘은 장식용일 경우 aria-hidden="true"를 적용합니다.
| 알림 버튼 | snackbar |
|---|---|
|
새로운 알림이 도착했습니다. |