로고SEED Design
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

상태슬롯속성
enabledrootcolor
labelcolor

size=large

상태슬롯속성
enabledrootminHeight
paddingX
paddingY
cornerRadius
iconAttachedInsetEnd
iconAttachedInsetTop
textAttachedGap
labelfontSize
lineHeight
fontWeight

size=small

상태슬롯속성
enabledrootsize
cornerRadius
iconAttachedInsetEnd
iconAttachedInsetTop
textAttachedGap

On this page