Badge

A small pill label for status, category or metadata, in five semantic tones and two sizes.

When to use

• A short state next to an item: "Ready", "Backing up", "Failed".
• Categories or counts in table cells and card footers.
• When the label changes in place (a project going from "Provisioning" to "Ready"), the badge morphs its width and swaps the text.
• Use ValuePill for a value set off inside prose, Chip for code tokens, and StatusPill when you need a dot-led status.

Usage

import { Badge } from "@/components/iris/badge/badge";

h(Badge, { tone: "success" }, "Ready");
h(Badge, { tone: "danger", size: "sm", icon: h(AlertIcon) }, "2 failed");

Props

Prop	Type	Default	Description
tone	"neutral" | "success" | "info" | "warning" | "danger"	"neutral"	Colour role. Always say the meaning in the text too.
size	"sm" | "md"	"md"	Compact size for dense rows.
icon	ReactNode	—	Leading glyph (decorative, aria-hidden). A different icon component crossfades in.
children	ReactNode	—	Label. String or number children animate when they change.
...props	HTMLAttributes<HTMLSpanElement>	—	Spread onto the root span.

Notes

• Outgoing text is hidden from assistive tech while it fades, so only the current label is read. Add role="status" yourself if a change must be announced.
• Width springs only when the label or icon changes; passive reflows (font load, resize) follow instantly. Under reduced motion swaps are a short fade.
• Tones are tinted from the semantic tokens (--green, --orange, --red, --accent for info) with color-mix; neutral uses --hover, --line and --ink-2.