Badge

A passive inline label with four closed visual variants.

When to use it. Use it to display concise caller-owned status text.

Native baseline Exact fallback

Badge primary example

default label secondary label destructive label outline label A deliberately long release candidate status

<.badge variant={:secondary}>Pending review</.badge>

<.badge> The caller's native elements, names, and document relationships remain authoritative.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :badge does not ship them.
application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Meaning is present in text and never relies on color alone.

Badge support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	The span text remains readable without package styles.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	The span text remains readable without package styles.

The application owns status meaning and changes; Badge never navigates or dismisses.

Catalogue identity foundation.badge, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt passive badge variants into a closed noninteractive HEEX component contract.