{
  "name": "Badge",
  "source": "src/components/Badge.tsx",
  "propsType": "BadgeProps",
  "description": "Badge is presentational — no role, no interaction. React Aria has nothing to\noffer here, so this is a plain span rather than a hook wrapper for its own\nsake.\n\nIt carries no `status` or `alert` role on purpose: a badge is a label on\nsomething else, and announcing it as a live region would interrupt screen\nreader users on every render. Wrap it yourself if the value genuinely changes\nand matters.",
  "import": "import { Badge } from 'ionbase-ui';",
  "status": "stable",
  "summary": "A small, non-interactive label that classifies the thing next to it. Presentational — no role, no live region.",
  "useWhen": [
    "labelling a record's status, type, count or category",
    "the label belongs to something else on the page and is read as part of it"
  ],
  "useInstead": [
    {
      "when": "the message is a standalone statement the user must read",
      "use": "Alert",
      "why": "Badge carries no role and is not announced on its own"
    },
    {
      "when": "the label should be clickable — a filter chip, a removable tag",
      "use": "Button",
      "why": "Badge takes no focus and fires nothing"
    }
  ],
  "variants": {
    "intent": {
      "neutral": {
        "use": "the default — a category with no judgement attached"
      },
      "primary": {
        "use": "brand emphasis: Beta, New, Pro"
      },
      "success": {
        "use": "a terminal good state: Active, Paid, Passed"
      },
      "warning": {
        "use": "needs attention but is not broken: Pending, Expiring"
      },
      "error": {
        "use": "a failed or blocked state: Failed, Overdue, Rejected"
      },
      "information": {
        "use": "a neutral fact worth marking: Draft, Scheduled"
      }
    },
    "size": {
      "sm": {
        "use": "the default. 20px tall on caption type — a marker beside a row, a cell or a title"
      },
      "md": {
        "use": "24px on body-sm. Use when the badge sits in body copy and a caption-sized label would read as a footnote"
      },
      "lg": {
        "use": "32px. A page-level status the eye should reach before the prose, not a marker in a list"
      }
    },
    "shape": {
      "pill": {
        "use": "the default. Fully round at every size"
      },
      "rounded": {
        "use": "a squarer corner that steps with the size — 4/6/8. Use when the badge sits in a grid of rectangular things and a pill reads as the odd one out"
      }
    }
  },
  "slots": {
    "icon": {
      "accepts": "Icon",
      "note": "mutually exclusive with `dot` — `dot` wins and `icon` is dropped when both are set"
    }
  },
  "a11y": {
    "guarantees": [
      "the dot marker is `aria-hidden`, so the badge announces its text only",
      "no `status` or `alert` role, so a re-render never interrupts a screen reader"
    ],
    "notes": [
      "If the value genuinely changes and the change matters, wrap the Badge in your own live region — the component will not do it for you."
    ]
  },
  "antiPatterns": [
    {
      "dont": "relying on intent colour alone to carry the meaning",
      "why": "colour is not a label (WCAG 1.4.1); the text has to say Failed, not just be red"
    },
    {
      "dont": "putting a Button or Link inside a Badge",
      "why": "it renders a plain <span>; interactive content there has no affordance and no focus style"
    }
  ],
  "stylesheet": "src/styles/badge.css",
  "tokens": [
    "--border-default",
    "--border-error-subtle",
    "--border-information-subtle",
    "--border-primary-subtle",
    "--border-success-subtle",
    "--border-warning-subtle",
    "--border-width-default",
    "--font-family-sans",
    "--font-weight-medium",
    "--icon-error",
    "--icon-information",
    "--icon-primary",
    "--icon-secondary",
    "--icon-size-2xs",
    "--icon-size-md",
    "--icon-size-sm",
    "--icon-success",
    "--icon-warning",
    "--radius-full",
    "--radius-md",
    "--radius-sm",
    "--radius-xs",
    "--spacing-2",
    "--spacing-20",
    "--spacing-24",
    "--spacing-32",
    "--spacing-4",
    "--spacing-6",
    "--surface-error-subtle",
    "--surface-information-subtle",
    "--surface-page",
    "--surface-primary-subtle",
    "--surface-success-subtle",
    "--surface-warning-subtle",
    "--text-error",
    "--text-information",
    "--text-link",
    "--text-secondary",
    "--text-success",
    "--text-warning",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "intent": {
      "type": "BadgeIntent | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Intent` variant.",
      "values": [
        "neutral",
        "primary",
        "success",
        "warning",
        "error",
        "information"
      ]
    },
    "size": {
      "type": "BadgeSize | undefined",
      "required": false,
      "origin": "own",
      "description": "Figma's `Size` variant. Heights are 20 / 24 / 32, pinned rather than\nderived from padding. `sm` is the default and is the size this component\nshipped with before the ramp existed.",
      "values": [
        "sm",
        "md",
        "lg"
      ]
    },
    "shape": {
      "type": "BadgeShape | undefined",
      "required": false,
      "origin": "own",
      "description": "Figma's `Shape` variant. `rounded` steps its corner with the size so the\nradius stays proportional; `pill` is fully round at every size.",
      "values": [
        "pill",
        "rounded"
      ]
    },
    "dot": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Show the leading dot marker. Figma's `Show Dot` boolean.\nThe dot inherits the intent's foreground colour, so it needs no prop."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Leading icon. Figma's `Show Icon` + `Icon` swap. Mutually exclusive with `dot`."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 6,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}