Badge
A small label, often a number or a dot, that sits on or beside another element to indicate status or count.
Inbox
Email
Alerts
Cart
Badges call attention without taking space. A numeric badge shows a count (unread messages, cart items); a dot badge just says 'something new is here'. They typically attach to icons or avatars. Apple HIG uses 'badge' for the red number on app icons; Material Design ships a Badge component with both numeric and dot variants. Don't confuse a badge with a chip: badges are read-only indicators, chips are interactive labels.
Also called
notification badgecount badgeindicator
When to use
- Unread count on a message or notification icon
- Status dot on an avatar (online, away, busy)
- New-item indicator on a tab or menu item
When not to use
- Long text labels (use a chip or tag)
- Decorative labels with no informational value
- Numbers larger than ~99 without formatting like '99+'
Related
Source
Apple HIG ('Notifications / Badging'), Material Design ('Badges'), Radix UI does not ship Badge directly but Shadcn's Badge is widely used.