{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "A small label for a status or category. You can add a prefix that only screen readers announce.",
  "categories": [
    "atom"
  ],
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/badge.tsx",
      "type": "registry:ui",
      "target": "components/ui/badge.tsx",
      "content": "/**\n * Badge — a small inline label for status, category, or a \"New\" marker.\n *\n * a11y: purely presentational by default. A badge that conveys information not\n * available elsewhere in the surrounding text needs an accessible name of its\n * own — pass `srLabel` for that (\"Status: \") rather than relying on colour or\n * position to carry the meaning.\n *\n * Dependencies: class-variance-authority, react, @/lib/utils.\n */\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport const badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium\",\n    \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-secondary text-secondary-foreground border-transparent\",\n        primary: \"bg-primary text-primary-foreground border-transparent\",\n        outline: \"border-border bg-background text-foreground\",\n        muted: \"bg-muted text-muted-foreground border-transparent\",\n        destructive: \"bg-destructive text-destructive-foreground border-transparent\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-xs\",\n        md: \"px-2.5 py-1 text-sm\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n)\n\nexport interface BadgeProps\n  extends ComponentPropsWithoutRef<\"span\">, VariantProps<typeof badgeVariants> {\n  /**\n   * A prefix only screen readers announce, for badges whose meaning is not in the visible\n   * text.\n   */\n  srLabel?: string\n  children?: ReactNode\n}\n\nexport function Badge({\n  variant,\n  size,\n  srLabel,\n  className,\n  children,\n  ...props\n}: BadgeProps) {\n  return (\n    <span className={cn(badgeVariants({ variant, size }), className)} {...props}>\n      {srLabel ? <span className=\"sr-only\">{srLabel}</span> : null}\n      {children}\n    </span>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/badge"
}