Badge

Badge is a short status word in a chip: Normal, Unbalanced, Open. The tone is the meaning and the variant is the weight. It has no "use client" directive, so it renders on the server and ships no client code of its own.

The component is scaffolding. Every variant recipe is empty until its design pass lands, so a badge renders as plain text today. The API below is settled; the look is not.

import Badge from "@haloid/azucar/ui/badge";

Tones

Five tones follow the color foundations. Pick the one that matches what the word means.

<div className="flex items-center gap-3">
<Badge tone="neutral">Neutral</Badge>
<Badge tone="good">Good</Badge>
<Badge tone="warn">Warn</Badge>
<Badge tone="bad">Bad</Badge>
<Badge tone="info">Info</Badge>
</div>

API

type BadgeVariant = "primary" | "secondary" | "ghost";
type BadgeTone = "neutral" | "good" | "warn" | "bad" | "info";

interface Props {
  children: React.ReactNode;
  variant?: BadgeVariant; // default "primary"
  tone?: BadgeTone; // default "neutral"
  className?: string;
}

Not supported: an icon slot, a dismiss control, sizes. A badge is one word.