Components
Notification Badge
Notification Badge는 사용자에게 읽지 않은 알림이나 상태 변경 정보를 시각적으로 전달하기 위해 사용됩니다.
Anatomy

- root
- label (Large 전용)
Options
Size
- Large size는 텍스트(label)를 포함하여 구체적인 알림 수나 상태 정보를 제공합니다. 구체적인 정보가 중요하고, 충분한 공간이 있을 때 사용합니다.
- Small size는 간결한 도트 형태로, 텍스트 없이 상태 변화를 표시합니다. 알림 유무만 중요하거나, 공간이 제한된 경우에 사용합니다.

Label (large 전용)
- Notification Badge 내에 표시되는 텍스트 요소로, 알림 수나 상태 정보를 전달합니다.
- 최대 4자까지의 텍스트를 포함하며, 4자 이상의 경우 "+" 기호를 사용해 추가 정보가 있음을 전달합니다.

Behaviors

위치
Notification Badge는 연관된 UI 요소(예: 네비게이션 아이콘)의 영역을 참조해 고정된 위치에 배치됩니다.
Usage Guidelines
명확한 알림 전달
- Notification Badge는 미확인 알림 또는 상태 정보를 전달하는 용도로만 사용합니다.
- 날씨, 날짜, 주가 등 단순 수치 정보는 Notification Badge에 적합하지 않습니다.

보조적 수단으로 사용
- Notification Badge만 사용하여 중요한 정보를 전달하지 않습니다. 앱의 다른 인터페이스에서도 해당 정보를 확인할 수 있어야 합니다.

일관성 유지
Notification Badge의 위치와 크기는 UI 레이아웃과의 시각적 충돌을 고려해 고정되어 있으므로, 임의로 변경하지 않습니다.

문자 수 제한
- Large Badge의 label은 최대 4자(필요시 "+" 기호 포함)로 제한됩니다.
- 4자리 이상의 숫자나 긴 텍스트는 축약하여 표시합니다.

최신 정보 유지
- 사용자가 알림을 확인하면 Notification Badge의 숫자가 즉시 갱신되어야 합니다.
- 알림 수가 0인 경우, Notification Badge를 숨기거나 제거하여 불필요한 시각적 혼란을 방지합니다.

링크
스펙
base
상태 | 슬롯 | 속성 | 값 |
---|---|---|---|
enabled | root | color | |
label | color |
size=large
상태 | 슬롯 | 속성 | 값 |
---|---|---|---|
enabled | root | minHeight | 18px |
paddingX | |||
paddingY | 0px | ||
cornerRadius | |||
iconAttachedInsetEnd | 8px | ||
iconAttachedInsetTop | 14px | ||
textAttachedGap | 2px | ||
label | fontSize | ||
lineHeight | |||
fontWeight |
size=small
상태 | 슬롯 | 속성 | 값 |
---|---|---|---|
enabled | root | size | 6px |
cornerRadius | |||
iconAttachedInsetEnd | 7px | ||
iconAttachedInsetTop | 7px | ||
textAttachedGap | 2px |