{
  "schemaVersion": 1,
  "name": "badge",
  "useFor": "Use pink for a feature or role marker beside a label (BETA, ADMIN), success size lg with a filled check-circle for something granted (Included), blue, purple and gray at size sm for event tags (Email, Signed, Fire-and-forget), green size sm for a rule mode (Blacklist), and size well for a status reading (Active on green, Idle on gray, Edge on blue). Default (purple) and destructive are for counts and errors.",
  "constraints": [
    "Caps typed with CSS",
    "A badge as a button",
    "More than three badges in a row",
    "Saturated fills behind text"
  ],
  "documentation": "",
  "source": "Figma 427:2715: the rail (BETA, ADMIN), Create Agent Identity (Included), Webhooks (Email, Signed, Fire-and-forget), iMessage (Blacklist), Tunnel (Active, Idle, Edge), Inbox (Unread)",
  "exports": [
    "Badge",
    "badgeVariants"
  ],
  "client": false,
  "docsUrl": "https://inkbox-ds.vercel.app/components/badge",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/badge.md",
  "examples": [
    {
      "path": "examples/badge.tsx",
      "content": "import { CheckCircleIcon } from \"@phosphor-icons/react/ssr\";\n\nimport { Badge } from \"@/components/ui/badge\";\n\nexport function Preview() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <span className=\"flex items-center gap-2.5 text-body text-fg\">\n        Agent2Agent\n        <Badge variant=\"pink\">BETA</Badge>\n      </span>\n      <span className=\"flex items-center gap-2.5 text-body text-fg\">\n        My Organisation\n        <Badge variant=\"pink\">ADMIN</Badge>\n      </span>\n      <Badge variant=\"success\" size=\"lg\">\n        <CheckCircleIcon weight=\"fill\" />\n        Included\n      </Badge>\n    </div>\n  );\n}\n\nexport function Tags() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-1.5\">\n      <Badge variant=\"blue\" size=\"sm\">Email</Badge>\n      <Badge variant=\"purple\" size=\"sm\">Signed</Badge>\n      <Badge variant=\"gray\" size=\"sm\">Fire-and-forget</Badge>\n      <Badge variant=\"green\" size=\"sm\">Blacklist</Badge>\n      <Badge variant=\"blue\" size=\"sm\">Unread</Badge>\n    </div>\n  );\n}\n\nexport function Status() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-6\">\n      <Badge variant=\"green\" size=\"well\">Active</Badge>\n      <Badge variant=\"gray\" size=\"well\">Idle</Badge>\n      <Badge variant=\"blue\" size=\"well\">Edge</Badge>\n    </div>\n  );\n}\n\nexport function Variants() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Badge>3 new</Badge>\n      <Badge variant=\"secondary\">Draft</Badge>\n      <Badge variant=\"outline\">Webhook</Badge>\n      <Badge variant=\"destructive\">Failed</Badge>\n      <Badge variant=\"ghost\">Archived</Badge>\n      <Badge variant=\"link\" asChild>\n        <a href=\"https://inkbox.ai/docs\" target=\"_blank\" rel=\"noreferrer\">Docs</a>\n      </Badge>\n    </div>\n  );\n}\n",
      "exports": [
        "Preview",
        "Tags",
        "Status",
        "Variants"
      ],
      "requires": [
        "badge"
      ],
      "packages": [
        "@phosphor-icons/react"
      ],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/badge/Preview"
        },
        {
          "name": "Tags",
          "url": "https://inkbox-ds.vercel.app/preview/badge/Tags"
        },
        {
          "name": "Status",
          "url": "https://inkbox-ds.vercel.app/preview/badge/Status"
        },
        {
          "name": "Variants",
          "url": "https://inkbox-ds.vercel.app/preview/badge/Variants"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Badge",
  "description": "The pink BETA and ADMIN marks, the green Included pill, the pale webhook tags, and the tunnel's status wells.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "radix-ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/badge.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Every badge in the console (Figma 427:2715). `pink` is BETA and ADMIN: a 1px pink edge, 4px corners, 12px pink text,\n// 22px tall with 6px sides. `success` is the Included pill: white with a 1px green edge, a filled check-circle (22px, the\n// design's 20px glyph at Phosphor's proportions) 4px in and a 14px green label, 28px tall. `blue`, `purple` and `gray` are the webhook tags (Email, Signed,\n// Fire-and-forget) at size sm: 11px medium on the pale fill, 4px corners, 17px tall; `green` is the Blacklist tag.\n// At size `well` they become the tunnel's 38px status wells (Active, Idle, Edge): 14px ink, 8px corners.\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-xs border border-transparent font-sans whitespace-nowrap transition-[background-color,color] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-on-primary [a&]:hover:bg-primary-hover\",\n        secondary: \"bg-subtle text-fg [a&]:hover:bg-subtle-hover\",\n        destructive: \"bg-danger text-white\",\n        outline: \"border-line-field bg-surface text-fg [a&]:hover:bg-subtle\",\n        ghost: \"text-fg-secondary [a&]:hover:bg-subtle\",\n        link: \"text-fg-brand underline-offset-4 [a&]:hover:underline\",\n        pink: \"rounded-sm border-pink bg-surface text-pink\",\n        success: \"rounded-pill border-success bg-surface text-success\",\n        green: \"bg-success-bg text-fg\",\n        blue: \"bg-tag-blue text-tag-blue-fg\",\n        purple: \"bg-tag-purple text-tag-purple-fg\",\n        gray: \"bg-tag-gray text-fg\",\n      },\n      size: {\n        sm: \"h-4.5 px-1 text-micro leading-tight font-medium [&>svg]:size-3.5\",\n        default: \"h-5.5 px-1.5 text-caption leading-tight [&>svg]:size-4\",\n        lg: \"h-7 gap-1.5 pr-2.5 pl-1 text-body leading-tight [&>svg]:size-5.5\",\n        well: \"h-9.5 rounded-control px-3.5 text-body leading-tight text-fg [&>svg]:size-5.5\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  },\n);\n\nfunction Badge({ className, variant, size, asChild = false, ...props }: React.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\";\n  return <Comp data-slot=\"badge\" data-variant={variant ?? \"default\"} className={cn(badgeVariants({ variant, size }), className)} {...props} />;\n}\n\nexport { Badge, badgeVariants };\n"
    }
  ]
}