{
  "name": "RoleBadge",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RoleBadge.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": "role-badge",
  "elName": "Four roles — Admin, Editor, Billing, Viewer",
  "demoUrl": "https://brand.magicblocks.ai/components/23-workspace#role-badge",
  "hasLiveDemo": false,
  "description": "A small pill rendering one of the four workspace roles — Admin, Editor,\nBilling, Viewer. The label + tint come from `ROLE_TAXONOMY`; the role id\nis the only prop consumers need. Used inside `<MemberRow>` /\n`<InviteRow>` and the audit-log entry meta, but composable anywhere a\nrole needs to be surfaced.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "RoleBadge",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RoleBadgeProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RoleBadge } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "role",
      "optional": false,
      "type": "RoleKey",
      "doc": "One of the four workspace roles — see `ROLE_TAXONOMY`. The `role` prop name shadows the HTML `role` attribute on purpose; that attribute is omitted from the spreadable rest so consumers can't pass conflicting values."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "role-badge"
  ],
  "examples": {
    "react": "<RoleBadge role=\"admin\" />\n<RoleBadge role=\"viewer\" />",
    "html": "<div class=\"role-badge-row\">\n  <span class=\"role-badge role-badge--error\">Admin</span>\n  <span class=\"role-badge role-badge--accent\">Editor</span>\n  <span class=\"role-badge role-badge--warning\">Billing</span>\n  <span class=\"role-badge role-badge--neutral\">Viewer</span>\n</div>",
    "css": ".role-badge {\n  font: 500 11px/1 var(--f-mono);\n  padding: 2px 8px;\n  border-radius: var(--r-pill);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  display: inline-flex;\n  align-items: center;\n}"
  }
}