Badge

GitHub

Compact status label with standard shadcn variants and green, red, and blue extensions.

Installation

bash
pnpm dlx shadcn@latest add @cs/badge

Usage

tsx
import { Badge } from "@/components/cs/badge"
tsx
<Badge variant="green">Active</Badge>

API Reference

Badge

Compact status label with standard shadcn variants and green, red, and blue extensions.

Props

NameTypeDefaultDescription
variant"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "green" | "red" | "blue" | null | undefined"default"Controls the badge color treatment.

badgeVariants

Visual variants available to the Badge component.