Count
Small number badge for counts, like unread items on a nav link or tab.
Master
Switch size, intent and value. 150 shows as 99+ with the default max.
3 unread messages
Usage
Use Count for a number next to a nav item, tab, button or icon, like 3 unread. Use Badge for words. Counts above max show as max+ (99+). Pass label so screen readers hear 3 unread messages, not just 3. See contracts/count.json for the full contract.
Do's
- Unread or pending counts on nav items, tabs and buttons.
- A total next to a section title.
Don'ts
- Do not invent a local counter or notification dot.
- Do not put words in a Count. Use Badge.
- Do not use Count as a button.
- Do not show more than one danger Count in a row.
- Do not use raw hex.
<Count
intent="info"
size="md"
count={3}
label="unread messages"
/>