Badge
Short status, labels and counts. Includes the GoodUnited status set with its own icons and the intent score badge.
Figma: 10 / Components / BadgeActiveDraft12
Usage
Source: src/components/ui/badge.tsx
import { Badge, BadgeStatus, ScoreBadge } from '@/components/ui/badge'<BadgeStatus status='active' />Status
Every GoodUnited domain status with its label and original icon.
DraftActiveApprovedInactiveNo budget
Variants and shapes
success, info and secondary, in the soft (4px) or pill shape.
BetaFundraiser PageContentApproved
Score
A supporter intent score.
87
When to use
When to reach for it, and when to use something else.
Use it for
Complete: BadgeStatus for tools, journeys and pages so a status always reads the same.
Complete: secondary for neutral counts beside a title.
Complete: success for Beta labels in navigation.
Avoid
Not complete: Badges as buttons. They are not interactive.
Not complete: Sentences inside a badge; keep it to one or two words.
Not complete: New status colors outside Colors/status.
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'success' | 'info' | 'secondary' | 'secondary' | Status color family. |
| shape | 'soft' | 'pill' | 'soft' | 4px corners for labels and counts, pill for status. |
BadgeStatus
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'draft' | 'active' | 'approved' | 'inactive' | 'no-budget' | – | The domain status. Sets the label, icon and color. |
| label | string | – | Overrides the default label. |
ScoreBadge
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | string | – | The intent score. |
