Components
Badge
A badge component
Preview
Loading...
import { BadgeCheckIcon } from "lucide-react";import { Badge } from "@/registry/axon/ui/badge";export default function BadgeDemo() { return ( <div className="flex flex-col items-center gap-2"> <div className="flex w-full flex-wrap gap-2"> <Badge>Badge</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="destructive">Destructive</Badge> <Badge variant="outline">Outline</Badge> </div> <div className="flex w-full flex-wrap gap-2"> <Badge className="bg-blue-500 text-white dark:bg-blue-600" variant="secondary" > <BadgeCheckIcon /> Verified </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"> 8 </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive" > 99 </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline" > 20+ </Badge> </div> </div> );}Installation
CLI
npx shadcn@latest add @emberui/badgeyarn shadcn@latest add @emberui/badgepnpm dlx shadcn@latest add @emberui/badgebunx --bun shadcn@latest add @emberui/badgeReference
This component is based on the shadcn/ui Badge component.