Skip to content
Perimeter Style

Badge

Displays a small status indicator or label.

Usage

tsx
import { Badge } from "@/components/ui/badge";

<Badge variant="default">Badge</Badge>
<Badge variant="default">Badge</Badge>

Light

Dark

Default

Metrics

Perimeter Api

Badge Controls

variant
children

Examples

All Variants

DefaultSecondaryDestructiveOutlineGhostLink

Status Indicators

ActivePendingErrorDraft

Installation

Install
$ pnpm dlx shadcn@latest add @perimeter/badge

Used in Templates

Search

Search for components, templates, and more.