{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Badge with a variant x tone x size matrix: 3 variants (solid, soft, outline), 6 tones, 3 sizes (sm, md, lg). Icons work with both lucide svg and remixicon i children. Supports asChild for links.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/badge.tsx",
      "content": "import type * as React from \"react\"\nimport { Slot } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0 [&>i]:pointer-events-none [&>i]:text-xs [&>i]:leading-none\",\n  {\n    variants: {\n      variant: {\n        solid: \"border-transparent\",\n        soft: \"border-transparent\",\n        outline: \"bg-transparent\",\n      },\n      tone: {\n        neutral: \"\",\n        brand: \"\",\n        success: \"\",\n        warning: \"\",\n        danger: \"\",\n        info: \"\",\n      },\n      size: {\n        sm: \"h-5 rounded-md px-1.5 text-xs\",\n        md: \"h-6 rounded-md px-2 text-xs\",\n        lg: \"h-7 rounded-lg px-2.5 text-sm\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"solid\", tone: \"neutral\", class: \"bg-primary text-primary-foreground\" },\n      { variant: \"solid\", tone: \"brand\", class: \"bg-brand text-brand-foreground\" },\n      { variant: \"solid\", tone: \"success\", class: \"bg-success text-success-foreground\" },\n      { variant: \"solid\", tone: \"warning\", class: \"bg-warning text-warning-foreground\" },\n      { variant: \"solid\", tone: \"danger\", class: \"bg-danger text-danger-foreground\" },\n      { variant: \"solid\", tone: \"info\", class: \"bg-info text-info-foreground\" },\n      { variant: \"soft\", tone: \"neutral\", class: \"bg-secondary text-secondary-foreground\" },\n      { variant: \"soft\", tone: \"brand\", class: \"bg-brand-soft text-brand-soft-foreground\" },\n      { variant: \"soft\", tone: \"success\", class: \"bg-success-soft text-success-soft-foreground\" },\n      { variant: \"soft\", tone: \"warning\", class: \"bg-warning-soft text-warning-soft-foreground\" },\n      { variant: \"soft\", tone: \"danger\", class: \"bg-danger-soft text-danger-soft-foreground\" },\n      { variant: \"soft\", tone: \"info\", class: \"bg-info-soft text-info-soft-foreground\" },\n      { variant: \"outline\", tone: \"neutral\", class: \"border-border text-foreground\" },\n      { variant: \"outline\", tone: \"brand\", class: \"border-brand/40 text-brand\" },\n      { variant: \"outline\", tone: \"success\", class: \"border-success/40 text-success\" },\n      { variant: \"outline\", tone: \"warning\", class: \"border-warning/50 text-warning-soft-foreground\" },\n      { variant: \"outline\", tone: \"danger\", class: \"border-danger/40 text-danger\" },\n      { variant: \"outline\", tone: \"info\", class: \"border-info/40 text-info\" },\n    ],\n    defaultVariants: {\n      variant: \"soft\",\n      tone: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\ninterface BadgeProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean\n}\n\nfunction Badge({ className, variant, tone, size, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : \"span\"\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(badgeVariants({ variant, tone, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants, type BadgeProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Use soft variant for status pills, solid for counts, outline for subtle tags. tone carries the semantic meaning.",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}