Badge
A badge shows a number, such as a count or a score.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | The value. A number is formatted against max, a string is shown as given. |
| appearance | 'default' | 'primary' | 'primary-inverted' | 'added' | 'removed' | 'important' | 'default' | Sets the colour to match what the count means. Use default unless the count shows a state. |
| max | number | None | The highest number shown. A larger count shows as this number with a plus, such as 99+, so the badge keeps its width. |
Accessibility
What the component does for you, and what it needs from you.
- A badge is visual only, so the element it sits on must carry the meaning. Include the count in the button or link label, as in Notifications, 5 unread.
- A capped value is read out as written, so 99+ is read as ninety nine plus.
- Colour is the only difference between appearances, so do not rely on the appearance alone to carry meaning.