{ "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." ] }