{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "badge",
  "name": "Badge",
  "category": "Data display",
  "description": "A compact label for status, counts and categories.",
  "tags": [
    "badge",
    "label",
    "status",
    "count",
    "tag",
    "pill"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "status label",
      "count badge",
      "tag",
      "new label",
      "category label"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": "Badges on everything, keep them for status and counts."
  },
  "url": "https://mian.ro/components/badge",
  "markdownUrl": "https://mian.ro/ai/components/badge.md",
  "classes": [
    {
      "name": "mn-badge",
      "description": "Solid badge, primary by default."
    },
    {
      "name": "mn-badge-soft · mn-badge-outline",
      "description": "Variants."
    },
    {
      "name": "mn-badge-sm · mn-badge-lg",
      "description": "Sizes."
    },
    {
      "name": "mn-dot",
      "description": "A status dot inside a badge."
    },
    {
      "name": "mn-* colour roles",
      "description": "Any role."
    }
  ],
  "accessibility": [
    "Badges are plain text. If a badge is a count on an icon button, include it in the button's aria-label."
  ],
  "examples": [
    {
      "title": "Variants",
      "description": null,
      "html": "<span class=\"mn-badge\">Default</span>\n<span class=\"mn-badge mn-secondary\">Secondary</span>\n<span class=\"mn-badge mn-badge-soft\">Soft</span>\n<span class=\"mn-badge mn-badge-outline\">Outline</span>"
    },
    {
      "title": "Status",
      "description": null,
      "html": "<span class=\"mn-badge mn-badge-soft mn-success\"><span class=\"mn-dot\"></span>Active</span>\n<span class=\"mn-badge mn-badge-soft mn-warning\"><span class=\"mn-dot\"></span>Pending</span>\n<span class=\"mn-badge mn-badge-soft mn-danger\"><span class=\"mn-dot\"></span>Failed</span>\n<span class=\"mn-badge mn-badge-soft mn-info\"><span class=\"mn-dot\"></span>Queued</span>\n<span class=\"mn-badge mn-badge-outline mn-neutral\">Draft</span>"
    },
    {
      "title": "Counts",
      "description": null,
      "html": "<button class=\"mn-btn mn-btn-outline\" aria-label=\"Inbox, 12 unread\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox <span class=\"mn-badge mn-badge-sm\">12</span></button>\n<span class=\"mn-badge mn-danger mn-badge-lg\">99+</span>"
    }
  ],
  "css": ".mn-badge {\n  display: inline-flex; align-items: center; gap: .3em;\n  height: 1.375rem; padding: 0 .55em;\n  border: var(--mn-border-w) solid transparent;\n  border-radius: var(--mn-radius-badge);\n  background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg));\n  font: 600 .75rem/1 var(--mn-font); white-space: nowrap; vertical-align: middle;\n}\n.mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, transparent); color: color-mix(in oklab, var(--_ct, var(--mn-primary-text)) 82%, var(--mn-fg)); }\n.mn-badge-outline { background: transparent; color: var(--_ct, var(--mn-fg)); border-color: color-mix(in oklab, var(--_c, var(--mn-fg)) 45%, transparent); }\n.mn-badge.mn-secondary:not(.mn-badge-soft):not(.mn-badge-outline) { border-color: var(--mn-border); }\n.mn-badge-sm { height: 1.125rem; font-size: .6875rem; }\n.mn-badge-lg { height: 1.625rem; font-size: .8125rem; padding: 0 .7em; }\n.mn-badge svg { width: .9em; height: .9em; }\n.mn-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/badge.json"
  }
}