Command Palette

Search for a command to run...

Badge

shadcn/ui

Displays a badge or a component that looks like a badge.

DefaultRaisedSecondaryOutlineDestructiveGhost

import { Badge } from "@/registry/optics/badge";<Badge>Default</Badge><Badge variant="raised">Raised</Badge><Badge variant="secondary">Secondary</Badge><Badge variant="outline">Outline</Badge><Badge variant="destructive">Destructive</Badge><Badge variant="ghost">Ghost</Badge>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/badge.json

Props

<Badge />
Name
Type
className
string
variant
"default" | "secondary" | "destructive" | "outline"
asChild
boolean (default: false)
AvatarBreadcrumb