Badge

A non-interactive label used to highlight short, scannable information — a status, a category tag, or a count — in the smallest possible footprint.

When to use

• Status indicators: Succeeded, Failed, Pending, Beta.
• Category or tag chips alongside list items, table rows, or cards.
• Counts (e.g. 12 new) when paired with brief context.

When not to use

• For interactive UI. Badges are not buttons or links — use Button or Anchor (optionally with asChild styling) instead.
• For long-form text. Keep labels to one or two short words.
• As the sole signal of meaning. Pair color with a label or icon so the distinction works without color (color blindness, monochrome themes).

Choosing a color

Prefer functional colors (success, warning, danger, info, accent, neutral) for status meaning so theming stays coherent. Reach for named hues only when the badge's semantic role isn't already covered.

1import { Badge } from "@ngrok/mantle/badge";2import { GlobeHemisphereWestIcon } from "@phosphor-icons/react/GlobeHemisphereWest";3 4<Badge appearance="muted" color="neutral">5	Muted neutral6</Badge>7<Badge appearance="muted" color="neutral" icon={<GlobeHemisphereWestIcon />}>8	Muted neutral9</Badge>

Polymorphism

When you want to render something else as a Badge, you can use the asChild prop to compose. This is useful when you want to splat the Badge styling onto a react-router Link.

1import { Badge } from "@ngrok/mantle/badge";2import { GlobeHemisphereWestIcon } from "@phosphor-icons/react/GlobeHemisphereWest";3import { Link, href } from "react-router";4 5<Badge appearance="muted" asChild color="pink" icon={<GlobeHemisphereWestIcon />}>⋯6	<Link to={href("/base/colors")}>See our colors!</Link>7</Badge>;

API Reference

Badge

All props from span, plus: