Push badge

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

Anatomy

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

Variants

Variants
Size

Size

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

Usage

Notification

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

With avatar

Avatar와 함께 사용자의 상태 변화를 시각적으로 알리기 위해 사용할 수 있습니다. 사용자의 프로필에 새로운 활동이 있거나 업데이트가 필요할 때 표시하여 사용자의 확인을 유도합니다.

Tab

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

Updates

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

Indicating count

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

Maximum count

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

How to use

Do

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

Don’t

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

Customize

Push Badge
offset
typographyColor
backgroundColor

© 2026 Wanted Lab, Inc.