A2
Badge
count (숫자, 상한 99+) · dot (6px 원형) · label (텍스트 태그) × 6 tone
정책 SSoT — components.md §A2
Count
알림 카운트. 99 초과 시 `99+`로 자동 자름. 부모 우상단 절대 위치 권장.
| variant | default | hover(정적 시연) | focus-visible(정적 시연) | active(정적 시연) | disabled |
|---|---|---|---|---|---|
| count/accent | 3 | 3 | 3 | 3 | 3 |
| count/success | 3 | 3 | 3 | 3 | 3 |
| count/warning | 3 | 3 | 3 | 3 | 3 |
| count/danger | 3 | 3 | 3 | 3 | 3 |
| count/info | 3 | 3 | 3 | 3 | 3 |
| count/neutral | 3 | 3 | 3 | 3 | 3 |
상한 시연 — 3 42 99+
Dot
8px 원형 indicator. 카운트가 없을 때 활동 신호 용도.
| variant | default | hover(정적 시연) | focus-visible(정적 시연) | active(정적 시연) | disabled |
|---|---|---|---|---|---|
| dot/accent | |||||
| dot/success | |||||
| dot/warning | |||||
| dot/danger | |||||
| dot/info | |||||
| dot/neutral |
Label
텍스트 태그. uppercase letter-spacing. radius-sm.
| variant | default | hover(정적 시연) | focus-visible(정적 시연) | active(정적 시연) | disabled |
|---|---|---|---|---|---|
| label/accent | ACCENT | ACCENT | ACCENT | ACCENT | ACCENT |
| label/success | SUCCESS | SUCCESS | SUCCESS | SUCCESS | SUCCESS |
| label/warning | WARNING | WARNING | WARNING | WARNING | WARNING |
| label/danger | DANGER | DANGER | DANGER | DANGER | DANGER |
| label/info | INFO | INFO | INFO | INFO | INFO |
| label/neutral | NEUTRAL | NEUTRAL | NEUTRAL | NEUTRAL | NEUTRAL |
Responsive
3 variant 혼합 wrap·정렬 시연
399NEWBETADOWNINFOlabel
399NEWBETADOWNINFOlabel
399NEWBETADOWNINFOlabel
399NEWBETADOWNINFOlabel
399NEWBETADOWNINFOlabel
399NEWBETADOWNINFOlabel