Badge
A badge is a visual indicator for numeric values such as tallies and scores.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Badge } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | number | string | — | The value. A number is formatted against max, a string is shown as given. |
| appearance | 'default' | 'primary' | 'primary-inverted' | 'added' | 'removed' | 'important' | 'default' | Matches the badge to what the number means. Use default unless the count carries a state. |
| max | number | — | The ceiling. A count above it shows as the ceiling followed by a plus, so the badge keeps its width. |
Accessibility
What the component does for you, and what it needs from you.
- A badge is decoration for the element it annotates, so the element itself must carry the meaning. Label the button or link with the count included, as in Notifications, 5 unread.
- A capped value announces as written, so 99+ is read as ninety nine plus.
- Colour is the only thing separating one appearance from another, so never let the appearance be the only carrier of meaning.