ChipCount
A small count next to a label: unread items, open issues or results. It caps long numbers, such as 99+.
- ChipCount
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ChipCount
Inbox 4 unreadIssues 250 open issuesAlerts 2 new alerts
Dark theme, ChipCount
Inbox 4 unreadIssues 250 open issuesAlerts 2 new alerts
High contrast theme, ChipCount
Inbox 4 unreadIssues 250 open issuesAlerts 2 new alerts
UsageLink to the section Usage
import { ChipCount } from '@skribly/ui/navigation'<ChipCount value={250} label="250 unread" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The number is read as the label when one is given, so a screen reader hears "250 unread" rather than "99 plus".
- It keeps a border under forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.