Callback

Function supplied to another component/function.

html

<div class="cbk cbk--idle" role="img" aria-label="Form passes onSave to SaveButton, call state idle">
  <div class="cbk__box cbk__box--parent">Form</div>
  <div class="cbk__link"><span class="cbk__code">onSave={handle}</span><span class="cbk__arrow" aria-hidden="true">&rarr;</span></div>
  <div class="cbk__box cbk__box--child">SaveButton<span class="cbk__fired">called onSave()</span></div>
</div>
<style>
.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; }
.cbk__box { flex: 1; padding: 14px; border-radius: 8px; background: #24143010; text-align: center; font-weight: 600; box-sizing: border-box; }
.cbk__link { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #24143099; flex-shrink: 0; }
.cbk__code { font: 10px ui-monospace, monospace; margin-bottom: 2px; }
.cbk__arrow { font-size: 16px; color: #24143060; }
.cbk__fired { display: none; font-size: 10px; font-weight: 400; color: #24143099; }
.cbk--fired .cbk__box--child { background: #A8E6C1; }
.cbk--fired .cbk__fired { display: block; margin-top: 4px; }
.cbk--fired .cbk__arrow { color: #241430; }
</style>

tailwind

<div class="cbktw cbktw--idle font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border flex items-center gap-2.5" role="img" aria-label="Form passes onSave to SaveButton, call state idle">
  <div class="flex-1 p-3.5 rounded-lg bg-[#24143010] text-center font-semibold box-border">Form</div>
  <div class="flex flex-col items-center text-[10px] text-[#24143099] shrink-0"><span class="font-mono mb-0.5">onSave={handle}</span><span class="cbktw__arrow text-base text-[#24143060]" aria-hidden="true">&rarr;</span></div>
  <div class="cbktw__child flex-1 p-3.5 rounded-lg bg-[#24143010] text-center font-semibold box-border">SaveButton<span class="cbktw__fired hidden text-[10px] font-normal text-[#24143099]">called onSave()</span></div>
</div>
<style>
.cbktw--fired .cbktw__child { background: #A8E6C1; }
.cbktw--fired .cbktw__fired { display: block; margin-top: 4px; }
.cbktw--fired .cbktw__arrow { color: #241430; }
</style>

react

export function Callback({
  parentName = "Form",
  childName = "SaveButton",
  callbackName = "onSave",
  status = "idle",
}) {
  const fired = status === "fired";
  return (
    <div role="img" aria-label={`${parentName} passes ${callbackName} to ${childName}, call state ${status}`}
      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 }}>
      <div style={{ flex: 1, padding: 14, borderRadius: 8, background: "#24143010", textAlign: "center", fontWeight: 600, boxSizing: "border-box" }}>{parentName}</div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", fontSize: 10, color: "#24143099", flexShrink: 0 }}>
        <span style={{ fontFamily: "ui-monospace, monospace", marginBottom: 2 }}>{callbackName}={"{handle}"}</span>
        <span aria-hidden="true" style={{ fontSize: 16, color: fired ? "#241430" : "#24143060" }}>&rarr;</span>
      </div>
      <div style={{ flex: 1, padding: 14, borderRadius: 8, textAlign: "center", fontWeight: 600, boxSizing: "border-box", background: fired ? "#A8E6C1" : "#24143010" }}>
        {childName}
        {fired && <span style={{ display: "block", marginTop: 4, fontSize: 10, fontWeight: 400, color: "#24143099" }}>called {callbackName}()</span>}
      </div>
    </div>
  );
}