Component

Badge

Inline label for status, category, or metadata. Five semantic variants.

All variants

live editor — edit to update preview

<div className="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="blue">Blue</Badge>
  <Badge variant="green">Published</Badge>
  <Badge variant="yellow">Pending</Badge>
  <Badge variant="red">Rejected</Badge>
</div>

Props

Prop	Type	Default	Description
variant	"default" \| "blue" \| "green" \| "red" \| "yellow"	"default"	Colour scheme.
className	string	—	Additional classes.
children*	ReactNode	—	Label text.