Badge

Small status indicator with variants for labels, tags, and status.

Preview

DefaultSecondaryDestructiveOutlineWarningBeta

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/badge

Usage

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

export function Example() {
  return (
    <Badge variant="default">Badge</Badge>
  )
}

Variants

DefaultSecondaryDestructiveOutlineWarningBeta

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="beta">Beta</Badge>

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "warning" \| "beta"	"default"	Visual style variant
asChild	boolean	false	Render as child element
className	string	-	Additional CSS classes