Badge
Displays a badge or a component that looks like a badge.
DefaultSecondaryOutlineDestructive
Installation
pnpm dlx shadcn@latest add badgeUsage
import { Badge } from "@/components/ui/badge";Displays a badge or a component that looks like a badge.
The pill geometry (fully rounded, px-3.5 py-2, text-sm font-light) is aligned
with StatusPill so badges and status pills share a
consistent shape and proportions across the system. The six variants
(default, secondary, destructive, outline, ghost, link) are unchanged.