Skip to content

Badge

A short static label. These seven variants are the only badge colors; each status uses its status tokens.

Sourcecomponents/badge.tsx

Variants

neutralbrandoutlinePaidDue soonOverdueDraft

With a count

Inbox 8 unread

Usage

Badge usage
import { Badge } from "@/components/badge";
export function BadgeUsage({ overdue }: { overdue: boolean }) {  return overdue ? <Badge variant="danger">Overdue</Badge> : <Badge variant="success">On track</Badge>;}

When to use

Use when

A short status or category label, using only its seven variants

Don’t use when

Anything clickable (use Button/Link); a new color for a new status (map it to success/warning/danger/info)