Visual indicators for counts, status updates, labels, and new content notifications.

12

Unread Messages

New email messages awaiting attention

3

Chat Notifications

Active conversations with new messages

7

General Notifications

System and app notifications

5

Cart Items

Products added to shopping cart

23

Inbox

Total items in inbox requiring action

Sizes

Small:3
Medium:12
Large:99+

Colors

DefaultSuccessErrorWarningInfoPurplePink

Positioning

Inline:NEWFeature
Positioned:
5

Count Badges

Display numerical values like unread messages, notifications, or cart items.

Status Badges

Indicate current state using symbols or short indicators.

Label Badges

Categorize or tag content with descriptive text labels.

✅ Do

  • • Use consistent positioning
  • • Keep text concise
  • • Use appropriate colors
  • • Consider accessibility

❌ Don't

  • • Overuse badge notifications
  • • Use similar colors for different meanings
  • • Make badges too small to read
  • • Use long text in badges

💡 Tips

  • • Use 99+ for high counts
  • • Animate new badges subtly
  • • Test with screen readers
  • • Consider cultural color meanings
0 itemsNo badge
1-99 items12
100+ items99+
New/Updated•
← Back to Notifications