Badge

Displays a badge or a component that looks like a badge for statuses, tags, count indicators, and categories.

Displays a badge or a component that looks like a badge for statuses, tags, count indicators, and categories.

Preview

DefaultSecondaryOutlineGlowGlassRetro

pnpm dlx vibe-ui-kit@latest add badge

DefaultSecondaryOutlineDestructiveGlow AccentGlassmorphicRetro Brutalist

Live System

Gradient Accent

FeaturedMessages

React

TypeScript

Tailwind CSS

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "glass" \| "retro" \| "glow"	"default"	Visual preset theme variant of the badge element.
className	string	-	Additional CSS class names to apply to the badge.

Jenish Sabhadiya