Human Approval

User approval required before an action.

html

<div class="human-approval" style="--accent:#E8A020;">
  <p class="human-approval__request">Send the drafted refund email to the customer.</p>
  <div class="human-approval__status human-approval__status--pending">
    <span class="human-approval__status-dot" aria-hidden="true"></span>
    pending
  </div>
  
  <div class="human-approval__actions">
    <button type="button" class="human-approval__btn human-approval__btn--approve">Approve</button>
    <button type="button" class="human-approval__btn human-approval__btn--reject">Reject</button>
  </div>
</div>
<style>
.human-approval { max-width: 420px; padding: 16px 18px; border-radius: 12px; background: #FAF7F2; color: #241430; border: 1px solid #24143020; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; }
.human-approval__request { margin: 0 0 12px; }
.human-approval__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: capitalize; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.human-approval__status-dot { width: 7px; height: 7px; border-radius: 50%; }
.human-approval__status--pending { background: #24143012; color: #241430; }
.human-approval__status--pending .human-approval__status-dot { background: var(--accent); }
.human-approval__status--approved { background: #A8E6C140; color: #1c5c3a; }
.human-approval__status--approved .human-approval__status-dot { background: #2f8f5b; }
.human-approval__status--rejected { background: #F5C2E040; color: #7a1f4a; }
.human-approval__status--rejected .human-approval__status-dot { background: #c23b6f; }
.human-approval__reason { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 13px; }
.human-approval__reason textarea { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid #24143030; resize: vertical; background: #fff; color: #241430; }
.human-approval__actions { display: flex; gap: 10px; }
.human-approval__btn { font: 600 14px system-ui, sans-serif; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; }
.human-approval__btn--approve { background: var(--accent); color: #241430; }
.human-approval__btn--reject { background: transparent; border-color: #24143040; color: #241430; }
.human-approval__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="human-approval-tw max-w-md p-4 rounded-xl bg-[#FAF7F2] text-[#241430] border border-[#24143020] box-border font-sans text-[15px]" style="--accent:#E8A020;">
  <p class="m-0 mb-3">Send the drafted refund email to the customer.</p>
  <div class="human-approval-tw__status human-approval-tw__status--pending inline-flex items-center gap-1.5 text-xs font-bold capitalize px-2.5 py-1 rounded-full mb-3">
    <span class="human-approval-tw__status-dot w-1.5 h-1.5 rounded-full" aria-hidden="true"></span>
    pending
  </div>
  
  <div class="flex gap-2.5">
    <button type="button" class="font-semibold text-sm px-4 py-2 rounded-lg cursor-pointer border-[1.5px] border-transparent" style="background:var(--accent);color:#241430;">Approve</button>
    <button type="button" class="font-semibold text-sm px-4 py-2 rounded-lg cursor-pointer bg-transparent border-[1.5px] border-[#24143040] text-[#241430]">Reject</button>
  </div>
</div>
<style>
.human-approval-tw__status--pending { background: #24143012; color: #241430; }
.human-approval-tw__status--pending .human-approval-tw__status-dot { background: var(--accent); }
.human-approval-tw__status--approved { background: #A8E6C140; color: #1c5c3a; }
.human-approval-tw__status--approved .human-approval-tw__status-dot { background: #2f8f5b; }
.human-approval-tw__status--rejected { background: #F5C2E040; color: #7a1f4a; }
.human-approval-tw__status--rejected .human-approval-tw__status-dot { background: #c23b6f; }
</style>

react

export function HumanApproval({
  request = "Send the drafted refund email to the customer.",
  status = "pending",
  accent = "#E8A020",
  requireReason = false,
}) {
  const statusStyle = {
    pending: { background: "#24143012", color: "#241430", dot: accent },
    approved: { background: "#A8E6C140", color: "#1c5c3a", dot: "#2f8f5b" },
    rejected: { background: "#F5C2E040", color: "#7a1f4a", dot: "#c23b6f" },
  }[status] ?? { background: "#24143012", color: "#241430", dot: accent };
  return (
    <div style={{ maxWidth: 420, padding: "16px 18px", borderRadius: 12, background: "#FAF7F2", color: "#241430", border: "1px solid #24143020", boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif" }}>
      <p style={{ margin: "0 0 12px" }}>{request}</p>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, textTransform: "capitalize", padding: "4px 10px", borderRadius: 999, marginBottom: 12, background: statusStyle.background, color: statusStyle.color }}>
        <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: "50%", background: statusStyle.dot }} />
        {status}
      </div>
      {requireReason && (
        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 14, fontSize: 13 }}>
          <label htmlFor="human-approval-react-reason">Reason (required before deciding)</label>
          <textarea id="human-approval-react-reason" rows={2} placeholder="Why are you approving or rejecting this?" style={{ font: "inherit", padding: 8, borderRadius: 8, border: "1px solid #24143030", resize: "vertical", background: "#fff", color: "#241430" }} />
        </div>
      )}
      <div style={{ display: "flex", gap: 10 }}>
        <button type="button" style={{ font: "600 14px system-ui, sans-serif", padding: "8px 16px", borderRadius: 8, cursor: "pointer", border: "1.5px solid transparent", background: accent, color: "#241430" }}>Approve</button>
        <button type="button" style={{ font: "600 14px system-ui, sans-serif", padding: "8px 16px", borderRadius: 8, cursor: "pointer", background: "transparent", border: "1.5px solid #24143040", color: "#241430" }}>Reject</button>
      </div>
    </div>
  );
}