Badge

stable

Compact status / metadata label. Four variants.

shell

pnpm dlx shadcn@latest add @webzenia/badge

preview

default

secondary

outline

destructive

props

variantdefault | secondary | outline | destructive= default

Tone.

accessibility

A badge is not a button — don’t attach click handlers; use a Button or Link for actions.

usage

tsx

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

<Badge>New</Badge>
<Badge variant="outline">Beta</Badge>