Badge

Variants

Badge ships with four core variants for common status patterns. Each variant uses semantic color tokens so badges adapt automatically across themes.

Semantic Variants

Additional semantic variants provide intent-specific coloring for success, warning, and info states.

Uppercase Labels

Set uppercase to render the label in all-caps — useful for plan, status, and role badges (ENTERPRISE, PRO, FREE).

The uppercase prop applies the .uppercase CSS module class, which sets --badge-text-transform: uppercase on the element. A theme can also drive this via the CSS custom property directly — any element in the theme cascade that sets --badge-text-transform: uppercase will produce uppercase badges without needing the prop.

Ground and Ink

Every variant reads its background through --badge-bg and its label colour through --badge-ink, falling back to the variant's own surface and text colour. Set either on a badge or on any ancestor to tint one badge without adding a variant per tint. With neither set, every variant renders exactly as it did before. A theme can bind both as components.badge.bg and components.badge.ink (see Component tokens).

On a photograph, a scrim ground keeps the label legible. Setting the tokens on the image container tints every badge inside it:

Installation

npx visor add badge

This copies two files into your project:

• components/ui/badge/badge.tsx — the component
• components/ui/badge/badge.module.css — the styles

Usage

import { Badge } from '@/components/ui/badge/badge';

<Badge variant="default">Active</Badge>
<Badge variant="outline">v2.1.0</Badge>

API Reference

BadgeProps

No props data available for “badge”.

The component also accepts all standard <span> HTML attributes.

Label Centering

The label is optically centred in any font: its line box is trimmed to the capital-height band, so capitals (not the font's ascent and descent) sit on the box centre, with the box size unchanged. Firefox keeps the previous rendering. Shared spec: docs/label-centering.md.