{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A small pill label in four variants with an optional status dot and success, warning and error tones. Style links with badgeVariants().",
  "dependencies": [
    "radix-ui",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/badge.tsx",
      "content": "// Ballmac UI: Badge. https://ui.ballmac.com/components/badge\n// Based on shadcn/ui's Badge (MIT, Copyright (c) 2023 shadcn), restyled with a status dot and status tones.\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium outline-none transition-[color,background-color,border-color,box-shadow] duration-150 focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80\",\n        outline: \"border-border bg-background text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        destructive:\n          \"border-transparent bg-destructive text-white dark:bg-destructive/60 focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n      },\n      // A soft tint that overrides the variant's colors. The label text stays foreground for contrast.\n      status: {\n        neutral: \"border-border bg-muted text-foreground\",\n        success: \"border-chart-2/30 bg-chart-2/10 text-foreground\",\n        warning: \"border-chart-3/30 bg-chart-3/10 text-foreground\",\n        error: \"border-destructive/30 bg-destructive/10 text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  }\n)\n\nconst dotColor = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-chart-2\",\n  warning: \"bg-chart-3\",\n  error: \"bg-destructive\",\n} as const\n\ntype BadgeStatus = keyof typeof dotColor\n\ntype BadgeProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    /** Render the child element (for example a link) with badge styles. */\n    asChild?: boolean\n    /** Show a small leading dot. On by default when `status` is set. */\n    dot?: boolean\n  }\n\nfunction Badge({ className, variant = \"default\", status, dot, asChild = false, children, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : \"span\"\n  const showDot = dot ?? !!status\n  const dotEl = showDot ? (\n    <span\n      data-slot=\"badge-dot\"\n      aria-hidden=\"true\"\n      className={cn(\"size-1.5 shrink-0 rounded-full\", status ? dotColor[status as BadgeStatus] : \"bg-current\")}\n    />\n  ) : null\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-status={status ?? undefined}\n      className={cn(badgeVariants({ variant, status }), className)}\n      {...props}\n    >\n      {dotEl}\n      <Slot.Slottable>{children}</Slot.Slottable>\n    </Comp>\n  )\n}\n\nexport { Badge, badgeVariants, type BadgeProps, type BadgeStatus }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/badge.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "badge",
      "status",
      "tag",
      "label",
      "pill"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "Short metadata or status label. Use variant for emphasis, status (neutral | success | warning | error) for state with a coloured dot, and badgeVariants() on an <a> for a link.",
      "whenToUse": [
        "Status of a deployment, invoice or job",
        "Counts, plan names and version tags",
        "Small labels on cards and table rows"
      ],
      "whenNotToUse": [
        "Clickable filters that toggle (use a toggle or button)",
        "Long text (it doesn't wrap)",
        "Notifications that need attention (use an alert or toast)"
      ],
      "composesWith": [
        "avatar",
        "button",
        "switch"
      ],
      "a11y": [],
      "customization": [
        "variant: default | secondary | outline | destructive",
        "status: neutral | success (chart-2) | warning (chart-3) | error (destructive); overrides variant colours with a soft tint",
        "dot: shows a leading dot; on by default when status is set",
        "badgeVariants({ variant }) gives the same styles to an <a> or button"
      ]
    },
    "source": {
      "name": "shadcn/ui Badge",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "badge-demo",
      "badge-status"
    ],
    "url": "https://ui.ballmac.com/components/badge"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}