Search for a command to run...
A compact label for status, counts, and metadata. Use to surface state ("Active"), highlight new items, or tag categories.
Four sizes — padding-defined, no fixed height. default/xs/sm step down for dense
surfaces (table cells, row metadata). Use lg (text-sm, size-4 icons) when a badge sits
inline with form controls so it lines up with the 36px Input/Select/Button rhythm — e.g.
the content-settings info columns, where Status / Type / Word Count match the View Content button.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "subtle" | "destructive" | "success" | "warning" | "info" | "outline" | "ghost" | "link" | "solid" | Visual style. Status variants are tinted; subtle and outline are neutral. |
size | "xs" | "sm" | "default" | "lg" | "default" | Padding/typography scale. lg aligns with form controls; xs/sm for dense inline metadata. |
asChild | boolean | false | Renders as the immediate child (e.g. an <a>) while keeping Badge styles. |
Use status variants (success, warning, destructive, info) to map to meaning, not just
color preference. Tinted badges read as state.
Reach for size="lg" when a badge shares a row with form controls (inputs, selects, buttons)
so it matches their 36px height — e.g. the content-settings info columns. Drop to sm/xs for
dense table cells and inline row metadata.
For categorical content (tags, property categories, anything user-defined), render variant="subtle"
with a small colored dot before the label:
The neutral pill keeps categorical labels visually distinct from status; the dot carries the color signal. Used by the audience table, audience filters, bulk-edit tags popover, broadcasts audience picker, and visitor sidebar tags/properties.
Keep badge labels short — one or two words. "Pending review", not "Currently pending administrator review".
Use asChild to wrap a Link when the badge is interactive (a tag filter, a category click).
Tint a badge for a category. A tinted "Teammate" or "VIP" reads as a status (success / destructive)
and competes with adjacent state badges. Categorical → subtle + dot.
Use a badge as a button. Badges read as status; if it's clickable as a primary action, use
Button instead.
Stack four or more badges in a row. Past three, switch to a chip list or hide the rest behind "+N more".
Use destructive for warnings. Reserve red for actions that already happened or will destroy
data.
Hand-roll status colors with raw Tailwind (bg-emerald-500/10 text-emerald-500). Use the
semantic variants (variant="success", variant="info", etc.) — they pick the right Radix step
and auto-invert in dark mode.