Badge
Compact pill for status, counts, or labels.
2.5 kBgzipped
- Use sparingly. Every badge draws the eye, so a row of five stops being a row of badges.
- Pair with
Button.leadingIcon / Avatar for status overlays.
Semantic color. Choose by the meaning of the label, not the color you
want — the theme decides the actual hue.
| Value | Use for |
|---|
neutral (default) | Counts, plain category labels |
primary | Brand-relevant labels, "New", "Pro" |
success | Healthy / done states |
warning | Pending / needs-attention states |
danger | Errors, expired, blocked |
<Badge tone="success">Active</Badge>
<Badge tone="danger">Expired</Badge>
Visual weight of the same tone. Pick by how loud the badge needs to
be in its row.
| Value | Look |
|---|
soft (default) | Tinted background, tone-colored text. Calm, readable. |
solid | Filled tone background, white text. Loud — used sparingly. |
outline | Border in tone, transparent background, tone-colored text. |
<Badge tone="primary" appearance="solid">PRO</Badge>
<Badge tone="warning" appearance="outline">Beta</Badge>
| Prop | Type | Default | Description |
|---|
appearance | enum | soft | Visual treatment.
- `soft` (default) — tinted background with darker tone-colored text. Modern, calm.
- `solid` — filled tone background, white text. Loud, used sparingly.
- `outline` — border in tone, transparent background, tone-colored text.
@defaultValue 'soft' |
className | string | — | — |
testID | string | — | — |
tone | enum | neutral | Semantic color of the badge.
@defaultValue 'neutral' |