Primitive

Badge

Inline status pill used for tone-tagged values (positive / negative / neutral). Tone is selected via data-tone.

Preview

+12%

Class

Class	When applied
`.asset-badge`	Always.

CSS variables

Override these on any ancestor scope (or globally) to restyle this primitive. See the CSS Variables reference for the full token list and Theming for override patterns.

Variable	Affects
`--asset-radius`	Corner radius (halved from the base value).
`--asset-font-mono`	Numeric font family.
`--asset-surface`	Background of the neutral and default tones.
`--asset-muted-foreground`	Text color of the neutral and default tones.
`--asset-success`	Background when data-tone="positive".
`--asset-success-foreground`	Text when data-tone="positive".
`--asset-destructive`	Background when data-tone="negative".
`--asset-destructive-foreground`	Text when data-tone="negative".