Push badge

새로운 업데이트나 알림이 있음을 시각적으로 알려주기 위해 사용합니다.

Anatomy

  1. 1. Dot badge
  2. 2. Container
  3. 3. Label

Variants

Variants
Size
Outline border

Size

좌우 사이즈는 자유롭게 커스터마이징하여 사용할 수 있으나 높이는 고정하여 사용합니다.

Usage

Notification

새로운 기능이 업데이트되거나, 알림이 있을 때 특정 요소와 함께 배치하여 사용자의 주의를 끌 수 있습니다.

With avatar

Avatar와 함께 사용자의 상태 변화를 시각적으로 알리기 위해 사용할 수 있습니다. 사용자의 프로필에 새로운 활동이 있거나 업데이트가 필요할 때 표시하여 사용자의 확인을 유도합니다. Avatar나 아이콘 위에 겹쳐 사용할 때는 Outline border를 활성화하여 배지의 경계가 묻히지 않도록 합니다.

Tab

Tab의 콘텐츠가 업데이트될 때 Push badge를 사용해 업데이트를 알릴 수 있습니다.

Updates

새로 추가된 기능이나 항목에 함께 배치해 사용자가 새로운 기능을 발견하도록 유도하는데 사용할 수 있습니다.

Indicating count

숫자 정보를 통해 새로운 소식의 정확한 개수를 알려줄 수 있습니다. 주로 탭 메뉴, 특정 아이콘의 오른쪽 상단에 작게 표시되어 사용자의 주의를 끌고 정확한 수를 안내합니다.

Maximum count

Max count는 숫자를 최대 99까지 표시합니다. 표시할 항목의 개수가 99개를 초과할 경우, 숫자 대신 '99+'로 표시하여 시각적인 복잡성을 줄입니다.

How to use

Do

한 화면에서 일관성을 위해 Push badge의 위치(Position)를 동일하게 사용합니다.

Don’t

작은 공간에서 Text badge를 사용하지 않습니다.

Customize

Push Badge
offset
contentColor
backgroundColor
outlineBorderColor
maxCount

© 2026 Wanted Lab, Inc.