Badge

A small label component for status indicators, counts, and tags with multiple visual variants.

Variants

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

ActiveDraftv2.1.0Error

Semantic Variants

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

DeployedPendingNew

Uppercase Labels

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

EnterpriseProFree

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.

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.