Badge

Purpose

A small, non-interactive label for status, counts, or metadata (e.g. "New", "3", "Archived"). Not a button — if it needs to be clickable, use a button with a small size, or wrap the badge in a link via asChild.

Anatomy

A single <span> (data-slot="badge"). Renders as an <a>/child element via asChild when it must be a link.

Style

• variant (default default): default (primary fill), secondary, destructive, outline, ghost, link. Colors are token-backed.
• No size variants — badges are a fixed compact size; scale the surrounding text context instead.

Behavior & functionality

Presentational only. Icon children are auto-sized.

Accessibility

• Purely visual — it conveys meaning via text. If a badge encodes status by color alone, include a text label or aria-label so it isn't color-only.
• Not focusable; don't attach click handlers (use a button/link instead).

Do / Don't

• ✅ Use for compact status/metadata next to a title or row.
• ❌ Don't make a bare badge interactive — promote to a button/link.