primitives
Badge
Small inline label — count, status, tag. For severity-coloured pills use `<Chip>`; the Badge variants are tone-only and don't carry severity meaning.
Install
Pull this component (and its dependencies) straight into your app via the shadcn CLI:
npx shadcn@latest add https://design.oapps.io/r/badge.jsonOr import from the workspace package:
import { Badge } from "@8maverik8/design";Examples
Variants
ActiveDraftBetaBlocked
<Badge>Active</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="outline">Beta</Badge>
<Badge variant="destructive">Blocked</Badge>With count
42
<Badge variant="secondary">42</Badge>Variants
variant
default(default)Filled primary — high-emphasis count or status.secondaryFilled secondary — neutral count.outlineBordered, transparent — quiet metadata chip.ghostNo chrome until hover — for clickable tags inside dense rows.destructiveTinted destructive — error count, blocked state.linkReads as an inline link — only when the badge is the action.
Guidelines
- Use Badge for cardinality (counts) and short status words (Active, Pending).
- Use Badge for severity (Critical / High / Medium / Low) — that's `<Chip severity>`.Badge variants don't map to a severity scale — Chip does, and using Badge instead causes inconsistent colour grammar across products.
- Wrap with `asChild` to make a clickable badge (e.g. as a filter chip).