{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "author": "Tori Bryan",
  "description": "A short label for status, category or count.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/badge.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-normal whitespace-nowrap *:data-[slot=status-dot]:size-2 [&>svg]:size-3 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground\",\n        destructive: \"bg-destructive-subtle text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n        success: \"bg-success-subtle text-success\",\n        warning: \"bg-warning-subtle text-warning\",\n        info: \"bg-info-subtle text-info\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return (\n    <span\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-destructive-subtle": "var(--destructive-subtle)",
      "color-success": "var(--success)",
      "color-success-subtle": "var(--success-subtle)",
      "color-warning": "var(--warning)",
      "color-warning-subtle": "var(--warning-subtle)",
      "color-info": "var(--info)",
      "color-info-subtle": "var(--info-subtle)",
      "text-color-destructive": "var(--destructive-text)",
      "background-color-destructive-subtle": "var(--destructive-subtle)",
      "text-color-success": "var(--success-text)",
      "background-color-success-subtle": "var(--success-subtle)",
      "text-color-warning": "var(--warning-text)",
      "background-color-warning-subtle": "var(--warning-subtle)",
      "text-color-info": "var(--info-text)",
      "background-color-info-subtle": "var(--info-subtle)"
    },
    "light": {
      "destructive-subtle": "color-mix(in oklch, var(--color-red-700) 8%, transparent)",
      "success": "var(--color-green-700)",
      "success-subtle": "color-mix(in oklch, var(--color-green-700) 6%, transparent)",
      "warning": "var(--color-amber-700)",
      "warning-subtle": "color-mix(in oklch, var(--color-amber-700) 6%, transparent)",
      "info": "var(--color-blue-700)",
      "info-subtle": "color-mix(in oklch, var(--color-blue-700) 6%, transparent)",
      "destructive-text": "var(--destructive)",
      "success-text": "var(--color-green-800)",
      "warning-text": "var(--color-amber-800)",
      "info-text": "var(--info)"
    },
    "dark": {
      "destructive-subtle": "color-mix(in oklch, var(--color-red-400) 20%, transparent)",
      "success": "var(--color-green-400)",
      "success-subtle": "color-mix(in oklch, var(--color-green-400) 20%, transparent)",
      "warning": "var(--color-amber-400)",
      "warning-subtle": "color-mix(in oklch, var(--color-amber-400) 20%, transparent)",
      "info": "var(--color-blue-400)",
      "info-subtle": "color-mix(in oklch, var(--color-blue-400) 20%, transparent)",
      "destructive-text": "var(--destructive)",
      "success-text": "var(--success)",
      "warning-text": "var(--warning)",
      "info-text": "var(--info)"
    }
  },
  "meta": {
    "tier": "base-components",
    "group": "Display",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-display-badge--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-display-badge--docs",
  "categories": [
    "base-components",
    "display"
  ],
  "type": "registry:ui"
}