Badges

Badges are small labels that provide additional information about an item.

Components
07/31/2025
Preview
Default
Destructive
Outline
Secondary
Success
Warning

Installation

npx shadcn@latest add https://docs-kit.pheralb.dev/r/badges

Usage

React

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

<Badge variant="secondary">Secondary</Badge>

Props

PropTypeRequired
variant"default" | "secondary" | "outline" | "destructive" | "success" | "warning"No
size"sm" | "md" | "lg"No
Included: DOMAttributes<HTMLDivElement>