Badge

Small status labels for counts, categories, and inline metadata — with variants, icons, and link composition.

A simple status label.

Installation

CLI

npx @sonojs/ui@latest add badge

badge.tsx

import { Badge } from "@/components/ui/badge"

export function Example() {
  return <Badge>Badge</Badge>
}

Prop	Type	Default	Description
variant	"default" · "secondary" · "destructive" · "outline" · "ghost" · "link"	"default"	Visual style of the badge.
asChild	boolean	false	Render as the child element (e.g. an anchor) instead of a span.