Navigation & Inputs · Data Display
Badge
also known as Notification badge, Count badge
A badge is a small, non-interactive indicator that conveys a number, status, or 'new' state, often overlaid on an icon or attached to an element. It draws attention to changes such as unread counts. Badges are read-only and not meant to be clicked or removed.
See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A badge is always static and signals counts, status, or updates; chips and tags are interactive elements users can select, filter, or remove. A pill is a shape style, and a status dot is a minimal badge with no number.
In the wild
The red '3' on a messaging app icon showing unread messages.