Badge

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

Installation

bash
npx canx-ui add badge

Usage

Default
Secondary
Outline
Destructive
tsx
import { Badge } from "@/components/ui/badge"

export function BadgeDemo() {
  return (
    <div className="flex gap-4">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}