{ "id": "button", "name": "Button", "kind": "primitive", "status": "draft-stable", "summary": "Canonical text/action button used by launcher stages, admin editors, and modal footers.", "sourceRefs": [ { "project": "nodedc_launcher", "file": "src/shared/ui/Button.tsx", "exports": ["Button"] }, { "project": "nodedc_launcher", "file": "src/styles/globals.css", "classes": [ "button", "button--primary", "button--secondary", "button--danger", "button--ghost", "button--accent", "button[data-surface='modal']" ] }, { "project": "nodedc_taskmanager", "file": "plane-src/apps/web/styles/globals.css", "classes": [ "nodedc-modal-primary-button", "nodedc-modal-secondary-button", "nodedc-modal-danger-button" ] } ], "api": { "props": { "variant": ["primary", "secondary", "danger", "ghost", "accent"], "surface": ["default", "modal"], "accentRgb": "optional RGB tuple used by accent variant", "icon": "optional leading icon" } }, "visualContract": { "height": "2.65rem default, tokens.size.modalButtonHeight on modal surface", "radius": "control", "fontWeight": "800", "outline": "never", "modalSecondaryDanger": "transparent until hover", "modalAccent": "filled component accent with computed on-accent text" }, "rules": [ "Use Button instead of hand-written button classes for text actions.", "Use IconButton or circle-action-button for icon-only actions.", "Inside modals, pass surface='modal' on every footer button.", "Modal Save and modal destructive confirm use variant='accent' with local accentRgb when the app accent differs.", "Inline modal delete buttons use variant='danger' with surface='modal'; they are transparent until neutral hover.", "Do not use red filled delete buttons outside NodeDcDeleteModal confirmation.", "Filled accent variants must use accent-contrast variables for readable text." ] }