{
  "name": "IconChip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/IconChip.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "icon-chip",
  "elName": "Six tones",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#icon-chip",
  "hasLiveDemo": false,
  "description": "Tinted icon-in-square primitive — for feature tiles, channel tiles,\nstatus tiles. The icon is consumer-rendered (typical: half the chip size).\nv1.61.0 (app-team R2).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "IconChip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "IconChipProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "IconChipTone",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { IconChip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "tone",
      "optional": true,
      "type": "IconChipTone",
      "doc": "Tone — picks the tinted background + matching text colour. Default `\"neutral\"`."
    },
    {
      "name": "size",
      "optional": true,
      "type": "number",
      "doc": "Square size in px. Default `40`. The icon inside is consumer-rendered."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "icon-chip"
  ],
  "examples": {
    "react": "<IconChip tone=\"accent\" size={40}><GlobeIcon size={20} /></IconChip>\n<IconChip tone=\"neutral\" size={32}><PhoneIcon size={16} /></IconChip>",
    "html": "<div style=\"display:flex;gap:var(--s-3);flex-wrap:wrap\"><span class=\"icon-chip icon-chip-neutral\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/><path d=\"M9 3a4 6 0 0 1 0 12 M9 3a4 6 0 0 0 0 12\"/></svg></span><span class=\"icon-chip icon-chip-accent\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/><path d=\"M9 3a4 6 0 0 1 0 12 M9 3a4 6 0 0 0 0 12\"/></svg></span><span class=\"icon-chip icon-chip-success\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/></svg></span><span class=\"icon-chip icon-chip-warning\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/></svg></span><span class=\"icon-chip icon-chip-danger\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/></svg></span><span class=\"icon-chip icon-chip-info\" style=\"width:40px;height:40px\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\"/><path d=\"M3 9h12\"/></svg></span></div>",
    "css": ".icon-chip {\n  display: inline-flex; align-items: center; justify-content: center;\n  border-radius: var(--r-md);\n  flex-shrink: 0;\n}"
  }
}