Badge
Displays a small badge or pill with a label.
Installation
Import the component:
import Badge from "@/components/ui/badge"
Basic Usage
Different variants of the Badge component to convey different meanings.
Open Preview
Default
Sizes
The Badge component comes in three sizes to suit different use cases.
Open Preview
Default
Variants
Different visual styles to match your UI needs.
Open Preview
Default
Props
Prop
Type
Default
Description
variant'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'—
The visual style of the badge
size'default' | 'sm' | 'lg'—
The size of the badge
classNamestring—
Additional CSS classes to apply
childrenRequiredReactNode—
The content to display inside the badge