CountDot
How many things wait — unread conversations — as a small iOS-red pill, its count in white, on a nav item's icon.
On a nav icon
The Inbox's icon in the rail, the tab bar and the sidebar carries how many conversations are unread. Placed at the icon's corner; past nine it says 9+.
1 unread3 unread12 unread
import { CountDot } from "@/components/shared/count-dot";
<span className="relative">
<Inbox aria-hidden className="size-5" />
<CountDot count={3} label="3 unread" className="absolute -top-1.5 -right-2.5" />
</span>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | How many wait. 0 or less renders nothing; past 9 it reads 9+. |
| label | string | — | The count in words for assistive tech: “3 unread”. |
| className | string | — | Placement: absolute, at the icon's corner. |
Guidelines
- Only for what waits on the person — unread conversations — never for totals.
- Always with its label: the number alone is hidden from assistive tech.