'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Badge
Small labels for status, category and counts.
Ant Design: Badge, Tag (static)
import { Badge, CountBadge } from '@alea/ui';
Examples
Tones
Soft by default, solid and outline for more or less weight.
neutralaccentsuccesswarningdangerinfo
neutralaccentsuccesswarningdangerinfo
neutralaccentsuccesswarningdangerinfo
Status and counts
A dot for live statuses, CountBadge for numbers.
LiveWaiting for approvalNew399+
Props
Badge props
A small status or count label. Not interactive.
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | "outline" | "soft" | "solid" | 'soft' | soft (tinted, default), solid, or outline. |
dot | boolean | - | A dot before the text, for statuses. |
size | "sm" | "md" | 'md' | sm 20 px or md 24 px (default). |
tone | "danger" | "success" | "warning" | "accent" | "info" | "neutral" | 'neutral' | neutral, accent, success, warning, danger or info. |
CountBadge props
A number bubble for notifications.
| Prop | Type | Default | Description |
|---|---|---|---|
countrequired | number | - | The number to show. |
label | string | - | Name for screen readers, e.g. "unread messages". |
max | number | 99 | Shows max+ above this. Default 99. |
tone | "danger" | "success" | "warning" | "accent" | "info" | "neutral" | 'accent' | Color of the bubble. Default accent. |
Accessibility
- Badges are text, so their meaning doesn't depend on color; give a CountBadge a label.
Do and don't
Do
- Use tones consistently: success for done, warning for attention.
Don't
- Don't make a badge interactive: use Tag.