Badge
A small label for a status, a count or a cashback rate.
import Badge from '@/components/ui/Badge';Source: src/components/ui/Badge.tsx
Examples
Colours
greynavyblueredgreengold
Variants
soft by default — a tinted background with dark text, which reads at every size. filled is for the one badge that must dominate; outline for a badge on an already-busy surface.
soft4.5 %ExpiredNew
filled4.5 %ExpiredNew
outline4.5 %ExpiredNew
With an icon
ConfirmedBoosted
Props
<Badge> props
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'navy' | 'blue' | 'red' | 'green' | 'gold' | 'grey' | 'grey' | — |
variant | 'filled' | 'soft' | 'outline' | 'soft' | — |
icon | ReactNode | — | Optional leading icon, e.g. <Icon name="tag" size="sm" />. |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLSpanElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Don’t
- Don’t use a Badge as a button. It has no focus state and no keyboard behaviour.
- Don’t put a sentence in one — a badge is a word or a number.