Skip to main content

Badge

Displays a badge or a component that looks like a badge.

Default
Secondary
Outline
Destructive
Success
import { Badge } from "@/components/ui/badge"

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>

API Reference​

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "destructive" | "success""default"The visual style variant of the badge

Accessibility​

  • Badge is presentational by default; add role="status" when conveying dynamic state
  • Text content provides meaning — color is not the sole differentiator
  • Supports all standard HTML div attributes for custom ARIA properties