Badge

Small status indicator with color variants.

Preview

DefaultSecondarySuccessOutlineDestructive

Installation

npx drivn add badge

Usage

1 import { Badge } from "@/components/ui/badge"
2 
3 export default function Page() {
4   return (
5     <Badge variant="default">
6       New
7     </Badge>
8   )
9 }

API Reference

Prop	Type	Default	Description
`variant`	"default" \| "secondary" \| "success" \| "outline" \| "destructive"	"default"	Visual style of the badge
`className`	string	—	Additional CSS classes to apply
`children`	ReactNode	—	Content displayed inside the badge

1	import { Badge } from "@/components/ui/badge"
2
3	export default function Page() {
4	return (
5	<Badge variant="default">
6	New
7	</Badge>
8	)
9	}