{
  "name": "Badge",
  "type": "component",
  "description": "Compact status or category label, in sixteen color variants and two sizes.",
  "export": "@gtmi/strix-react/atoms/badge",
  "path": "@gtmi/strix-react/atoms/badge",
  "figma": {
    "file": "zT3vGm4QlFEI2Jp9nxyFKI",
    "fileName": "Demo components library",
    "nodes": [
      {
        "node": "22:4009",
        "name": ".badge",
        "section": "Atoms"
      },
      {
        "node": "22:4267",
        "name": ".badge-animation",
        "section": "Animations"
      }
    ],
    "note": "Dual membership: .badge is in Figma Atoms, .badge-animation in Animations. AGENTS.md files this under Atoms and says not to reconcile the two axes."
  },
  "props": [
    {
      "name": "label",
      "type": "string",
      "required": true,
      "description": "Badge text."
    },
    {
      "name": "variant",
      "type": "default | feature | neutral | success | decorative10 | decorative20 | decorative30 | decorative40 | warning | error | new | subaccount | brand10 | brand20 | brand30 | code",
      "default": "default",
      "description": "Color variant. Also emitted as data-variant."
    },
    {
      "name": "size",
      "type": "small | default",
      "default": "default",
      "description": "Size. The code variant is fixed-size and ignores this."
    },
    {
      "name": "icon",
      "type": "ReactNode",
      "description": "Optional leading icon, auto-sized to 12x12."
    },
    {
      "name": "hasIndicator",
      "type": "boolean",
      "default": "false",
      "description": "Show a small success dot in the top-right corner. Decorative, so aria-hidden."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn(), so a caller can override the variant's surface or ink."
    }
  ],
  "ai_tags": ["badge", "tag", "status", "chip", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-accent-lavender-200",
    "--color-accent-lime-200",
    "--color-accent-mint-500",
    "--color-accent-sky-100",
    "--color-accent-sun-200",
    "--color-border-neutral-strong",
    "--color-icon-success-soft",
    "--color-surface-accent-extra-soft",
    "--color-surface-accent-extra-strong",
    "--color-surface-accent-soft",
    "--color-surface-badge-error",
    "--color-surface-inverse",
    "--color-surface-neutral-soft",
    "--color-surface-success",
    "--color-surface-warning-soft",
    "--color-text-accent",
    "--color-text-accent-strong",
    "--color-text-badge-on-accent",
    "--color-text-inverse",
    "--color-text-primary",
    "--color-text-secondary",
    "--color-text-success",
    "--leading-height-figma-12",
    "--radius-xs",
    "--radius-2x-large",
    "--text-size-body-small",
    "--text-size-body-xsmall",
    "--text-size-figma-12"
  ],
  "notes": "All sixteen upstream variants are present; none was dropped. Four ink choices differ from maker-ds because the upstream pairing fails WCAG AA, which the component's tests measure per variant per theme: `feature` uses text-inverse (upstream named a token that does not exist), `subaccount` uses text-badge-on-accent (ditto), `neutral` steps to text-accent-strong (4.18:1 -> 5.79:1), and `warning` uses text-primary (orange on pale orange was 2.37:1). The four accent surfaces that never change between themes take the theme-invariant --color-text-badge-on-accent ink; `new` does not, because the dark CORRECTIONS block re-declares its lavender surface. Figma alignment (scripts/figma/bindings/badge.json): the Figma `.badge` atom turns out to be this component's `small` size almost exactly -- 8px horizontal padding, fully round, a 12px label at Book weight -- so the alignment is one change, `small` taking the 12/18 pair Figma binds (--text-size-figma-12 / --leading-height-figma-12) in place of the 12/16 --*-body-xsmall ramp. It is scoped to `small` on purpose: Figma has no counterpart for `default` (4px radius, semibold), so the authority is silent on it rather than in conflict, and widening the change would restyle a size on no evidence. The two things that were NOT adopted now are, because rule 3 (dark-only) removed the reasoning behind both. Figma's 24px height ships as `h-6`: the deferral wanted a 3px padding step to derive 24 from an 18px ramp, but a fixed frame height is stated rather than derived, which is what `.button-main`'s one 40px height already established as `h-10`. And Figma's colour treatment ships as `--color-surface-badge-error` (accesible-red-dark-theme #ef223a at 20%) with a white `text-text-inverse` label -- 16.96:1 on Figma's own page. It was declined three times for measuring 1.36:1 composited over a WHITE page, and there is no longer a white page; the number that governs is the dark one, so this is a clean revert with nothing logged in docs/FIGMA-EXCEPTIONS.md. It is its own role rather than a re-point of --color-surface-error because Figma's error BANNER is a solid #b10f23 (.system-messages) and that role is shared with ChatLog, Alert and Avatar. The contrast test no longer skips the two translucent surfaces: with one page the backdrop is known, so it composites them and measures the result."
}