Edit Callback

Name

Also known as (comma separated)

Brief definition Function supplied to another component/function.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "parentName", "type": "text", "label": "Parent component", "default": "Form" }, { "id": "childName", "type": "text", "label": "Child component", "default": "SaveButton" }, { "id": "callbackName", "type": "text", "label": "Callback prop", "default": "onSave" }, { "id": "status", "type": "select", "label": "Call state", "default": "idle", "options": [ "idle", "fired" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cbk cbk--{{status}}\" role=\"img\" aria-label=\"{{parentName}} passes {{callbackName}} to {{childName}}, call state {{status}}\">\n <div class=\"cbk__box cbk__box--parent\">{{parentName}}</div>\n <div class=\"cbk__link\"><span class=\"cbk__code\">{{callbackName}}={handle}</span><span class=\"cbk__arrow\" aria-hidden=\"true\">&rarr;</span></div>\n <div class=\"cbk__box cbk__box--child\">{{childName}}<span class=\"cbk__fired\">called {{callbackName}}()</span></div>\n</div>\n<style>\n.cbk { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; }\n.cbk__box { flex: 1; padding: 14px; border-radius: 8px; background: #24143010; text-align: center; font-weight: 600; box-sizing: border-box; }\n.cbk__link { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #24143099; flex-shrink: 0; }\n.cbk__code { font: 10px ui-monospace, monospace; margin-bottom: 2px; }\n.cbk__arrow { font-size: 16px; color: #24143060; }\n.cbk__fired { display: none; font-size: 10px; font-weight: 400; color: #24143099; }\n.cbk--fired .cbk__box--child { background: #A8E6C1; }\n.cbk--fired .cbk__fired { display: block; margin-top: 4px; }\n.cbk--fired .cbk__arrow { color: #241430; }\n</style>", "tailwind": "<div class=\"cbktw cbktw--{{status}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border flex items-center gap-2.5\" role=\"img\" aria-label=\"{{parentName}} passes {{callbackName}} to {{childName}}, call state {{status}}\">\n <div class=\"flex-1 p-3.5 rounded-lg bg-[#24143010] text-center font-semibold box-border\">{{parentName}}</div>\n <div class=\"flex flex-col items-center text-[10px] text-[#24143099] shrink-0\"><span class=\"font-mono mb-0.5\">{{callbackName}}={handle}</span><span class=\"cbktw__arrow text-base text-[#24143060]\" aria-hidden=\"true\">&rarr;</span></div>\n <div class=\"cbktw__child flex-1 p-3.5 rounded-lg bg-[#24143010] text-center font-semibold box-border\">{{childName}}<span class=\"cbktw__fired hidden text-[10px] font-normal text-[#24143099]\">called {{callbackName}}()</span></div>\n</div>\n<style>\n.cbktw--fired .cbktw__child { background: #A8E6C1; }\n.cbktw--fired .cbktw__fired { display: block; margin-top: 4px; }\n.cbktw--fired .cbktw__arrow { color: #241430; }\n</style>", "react": "export function Callback({\n parentName = \"{{parentName}}\",\n childName = \"{{childName}}\",\n callbackName = \"{{callbackName}}\",\n status = \"{{status}}\",\n}) {\n const fired = status === \"fired\";\n return (\n <div role=\"img\" aria-label={`${parentName} passes ${callbackName} to ${childName}, call state ${status}`}\n style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <div style={{ flex: 1, padding: 14, borderRadius: 8, background: \"#24143010\", textAlign: \"center\", fontWeight: 600, boxSizing: \"border-box\" }}>{parentName}</div>\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", fontSize: 10, color: \"#24143099\", flexShrink: 0 }}>\n <span style={{ fontFamily: \"ui-monospace, monospace\", marginBottom: 2 }}>{callbackName}={\"{handle}\"}</span>\n <span aria-hidden=\"true\" style={{ fontSize: 16, color: fired ? \"#241430\" : \"#24143060\" }}>&rarr;</span>\n </div>\n <div style={{ flex: 1, padding: 14, borderRadius: 8, textAlign: \"center\", fontWeight: 600, boxSizing: \"border-box\", background: fired ? \"#A8E6C1\" : \"#24143010\" }}>\n {childName}\n {fired && <span style={{ display: \"block\", marginTop: 4, fontSize: 10, fontWeight: 400, color: \"#24143099\" }}>called {callbackName}()</span>}\n </div>\n </div>\n );\n}" }