{
  "title": "Badge",
  "description": "Compact pill for status, counts, or labels.",
  "url": "/docs/components/badge",
  "since": "0.2.0",
  "tags": [
    "display"
  ],
  "platform": "both",
  "source": "---\ntitle: Badge\ndescription: Compact pill for status, counts, or labels.\nsince: 0.2.0\ntags: [display]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Badge\" />\n\n## At a glance\n\n- Use sparingly. Every badge draws the eye, so a row of five stops being a row of badges.\n- Pair with `Button.leadingIcon` / Avatar for status overlays.\n\n## Preview\n\n<Preview name=\"badge-basic\" />\n\n## `tone`\n\nSemantic color. Choose by the meaning of the label, not the color you\nwant — the theme decides the actual hue.\n\n| Value             | Use for                                           |\n|-------------------|---------------------------------------------------|\n| `neutral` (default) | Counts, plain category labels                   |\n| `primary`         | Brand-relevant labels, \"New\", \"Pro\"               |\n| `success`         | Healthy / done states                             |\n| `warning`         | Pending / needs-attention states                  |\n| `danger`          | Errors, expired, blocked                          |\n\n```tsx\n<Badge tone=\"success\">Active</Badge>\n<Badge tone=\"danger\">Expired</Badge>\n```\n\n## `appearance`\n\nVisual weight of the same `tone`. Pick by how loud the badge needs to\nbe in its row.\n\n| Value             | Look                                                       |\n|-------------------|------------------------------------------------------------|\n| `soft` (default)  | Tinted background, tone-colored text. Calm, readable.      |\n| `solid`           | Filled tone background, white text. Loud — used sparingly. |\n| `outline`         | Border in tone, transparent background, tone-colored text. |\n\n```tsx\n<Badge tone=\"primary\" appearance=\"solid\">PRO</Badge>\n<Badge tone=\"warning\" appearance=\"outline\">Beta</Badge>\n```\n\n## Props\n\n<PropsTable component=\"Badge\" />\n"
}