Components
Badge
Use for status indicators, counts, and states. Not for actions or categories.
Preview
Active
Every color maps to a Cognition feedback token — no raw Tailwind palette utilities (the fix for badge.tsx's 30+ baked-in variants).
Variants
Default
<Badge>Default</Badge>Success
<Badge color="success">Success</Badge>Destructive
<Badge color="destructive">Destructive</Badge>Warning
<Badge color="warning">Warning</Badge>Info
<Badge color="info">Info</Badge>Semantic intent is the color prop — the error value is destructive (Cognition's danger feedback token).
API
Prop
Type
Default
Description
variant
"default" | "secondary" | "outline"
"default"
Fill style — solid, tonal, or bordered.
color
"default" | "primary" | "destructive" | "success" | "warning" | "info"
"default"
Semantic color, combined with the variant.
size
"default" | "sm"
"default"
Standard or compact.
children
ReactNode
required
Label text; a leading icon is sized automatically.
Don't and Do
Don't
Don't fake a status with a pill-shaped Button or a raw styled span — that's what a Badge is for.
Do
// Status indicator
<Badge color="success">Active</Badge>import { Badge } from "@/components/ui/badge";
export function Status() {
return <Badge color="success">Active</Badge>;
}