ComponentsData Display

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

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.

Avatar

A circular avatar component with image display and fallback support for initials or icons.

Bento Grid

An asymmetric tile grid primitive with full/half span variants, per-tile aspect ratios, contain/cover media fit modes, and marketing-grade typography sub-components.