Badge.

The visual punctuation of the interface. Badges quantify, categorize, or status-check content without overwhelming the hierarchy. They are compact information density at its finest.

import { Badge } from "@/components/ui/badge"

Configuration

Context

Visual Style

Database

Operational

API Gateway

v2.4.0

Status Indicator Mode

Optical Alignment

Badges often sit next to text. We enforce specific line-heights and padding (py-0.5) to ensure the text inside the badge optically aligns with the surrounding content, preventing the 'floating pill' effect.

Semantic Context

Color conveys meaning (Red = Critical, Yellow = Warning). However, for accessibility, color shouldn't be the only indicator. We ensure badges support icon composition to reinforce the message for color-blind users.

Dashboard.tsx

<div className="flex items-center gap-4">
  <span className="text-sm font-medium">Inbox</span>
  <Badge variant="destructive" className="rounded-full px-2">
    12
  </Badge>
</div>

// Composition with Icon
<Badge variant="outline" className="gap-1 pl-1.5">
  <GitBranch size={12} />
  <span>main</span>
</Badge>