core
Badge
Variants
DefaultSecondaryPaidOverduePending12
Import
import { Badge } from '@connor-adams/designsystem'Usage
One-line: Small pill for status, category, and counts — default is oxblood brand fill, secondary the neutral workhorse.
<Badge>Active</Badge>
<Badge variant="secondary">CAD</Badge>
<Badge variant="success">Reconciled</Badge>
<Badge variant="count">12</Badge>
Variants: default (oxblood) · secondary (muted) · destructive · outline · success (green tint) · count (uppercase bold counter). Keep oxblood badges rare — prefer secondary for most metadata.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | BadgeVariant | undefined | default |