Badge
A small pill for status, counts, or category labels. Seven color variants with a dot prefix by default, swappable for an icon or stripped of chrome entirely with the plain prop.
Variants
Each variant gets a small dot indicator at the start of the label, except outline.
Usage
Import the parts you need from the component's folder.
ts
import { Badge } from "@/components/ui/badge";With icon
The withIcon prop swaps the dot for a default icon that matches the variant (info, success check, warning triangle, and so on).
Custom icon
Pass any hugeicons or lucide name to icon to override the default.
Plain
plain removes the border, padding, and radius. Good inside tables or inline with body text.