{
  "id": "circle-action-button",
  "name": "CircleActionButton",
  "kind": "primitive",
  "status": "draft-stable",
  "summary": "Icon-only circular action control for close, add, edit, refresh, search, copy, drag-adjacent actions, and toolbar icon actions.",
  "sourceRefs": [
    {
      "project": "nodedc_launcher",
      "file": "src/shared/ui/Button.tsx",
      "exports": ["IconButton"]
    },
    {
      "project": "nodedc_launcher",
      "file": "src/styles/globals.css",
      "classes": ["admin-circle-action", "admin-panel-close", "services-admin-table__edit"]
    },
    {
      "project": "nodedc_taskmanager",
      "file": "plane-src/apps/web/styles/globals.css",
      "classes": ["nodedc-external-icon-button", "nodedc-toolbar-icon-button"]
    }
  ],
  "anatomy": [
    "button element",
    "single centered icon",
    "aria-label/title",
    "optional solid active/primary variant"
  ],
  "geometry": {
    "size": "tokens.size.controlRing",
    "shape": "circle",
    "insetToHostEdge": "tokens.size.controlInset when anchored in a rounded container"
  },
  "variants": {
    "ghost": {
      "background": "transparent",
      "border": "soft white alpha only if needed",
      "hover": "white alpha surface"
    },
    "solid": {
      "background": "rgba(247, 248, 244, 0.96)",
      "color": "onAccentRgb"
    }
  },
  "rules": [
    "Do not replace with text pill when action is clear by icon.",
    "Close button starts transparent with only soft circular boundary.",
    "Hover may add subtle surface fill.",
    "All icon-only admin actions share the same diameter."
  ]
}

