Badge
A small notification marker for unread activity or item counts.
Overview
A badge is a small marker placed on the trailing edge of an icon or navigation destination to signal a notification, an unread state, or the number of items. It comes in two sizes: a small dot for unread activity, and a large count pill for a quantity.
31099+999+
$ npx morpha-ui add badgeThe count label holds a maximum of four characters, including the + symbol
used to indicate a larger number (e.g. 99+, 999+).
Examples
On an icon
Position the badge against the trailing edge of the icon it annotates.
8
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add badge. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add badgeAPI Reference
Prop
Type
Accessibility
- A badge is a decorative visual marker; the count or unread state it conveys
must also be exposed to assistive tech on the host control (e.g. via an
aria-labelsuch as "Notifications, 8 unread"). - Use
size="sm"(the dot) only to signal presence of activity, not a specific value — pair it with an accessible label that states what changed.