Displays a badge or a component that looks like a badge.
import { Badge } from "@/registry/ui/badge"
export default function BadgeDemo() {Installation
pnpmnpmyarnbun
Usage
import { Badge } from "@/components/ui/badge"<Badge>Badge</Badge>Examples
Default
import { Badge } from "@/registry/ui/badge"
export default function BadgeDefault() {Secondary
import { Badge } from "@/registry/ui/badge"
export default function BadgeSecondary() {Destructive
import { Badge } from "@/registry/ui/badge"
export default function BadgeDestructive() {Outline
import { Badge } from "@/registry/ui/badge"
export default function BadgeOutline() {With Icon
import { CheckCircle } from "lucide-react"
import { Badge } from "@/registry/ui/badge"