Edit Human Approval

Name

Also known as (comma separated)

Brief definition User approval required before an action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "request", "type": "text", "label": "Request", "default": "Send the drafted refund email to the customer." }, { "id": "status", "type": "select", "label": "Status", "default": "pending", "options": [ "pending", "approved", "rejected" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "requireReason", "type": "toggle", "label": "Require a reason", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"human-approval\" style=\"--accent:{{accent}};\">\n <p class=\"human-approval__request\">{{request}}</p>\n <div class=\"human-approval__status human-approval__status--{{status}}\">\n <span class=\"human-approval__status-dot\" aria-hidden=\"true\"></span>\n {{status}}\n </div>\n {{#if requireReason}}\n <div class=\"human-approval__reason\">\n <label for=\"human-approval-reason-field\">Reason (required before deciding)</label>\n <textarea id=\"human-approval-reason-field\" rows=\"2\" placeholder=\"Why are you approving or rejecting this?\"></textarea>\n </div>\n {{/if}}\n <div class=\"human-approval__actions\">\n <button type=\"button\" class=\"human-approval__btn human-approval__btn--approve\">Approve</button>\n <button type=\"button\" class=\"human-approval__btn human-approval__btn--reject\">Reject</button>\n </div>\n</div>\n<style>\n.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; }\n.human-approval__request { margin: 0 0 12px; }\n.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; }\n.human-approval__status-dot { width: 7px; height: 7px; border-radius: 50%; }\n.human-approval__status--pending { background: #24143012; color: #241430; }\n.human-approval__status--pending .human-approval__status-dot { background: var(--accent); }\n.human-approval__status--approved { background: #A8E6C140; color: #1c5c3a; }\n.human-approval__status--approved .human-approval__status-dot { background: #2f8f5b; }\n.human-approval__status--rejected { background: #F5C2E040; color: #7a1f4a; }\n.human-approval__status--rejected .human-approval__status-dot { background: #c23b6f; }\n.human-approval__reason { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 13px; }\n.human-approval__reason textarea { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid #24143030; resize: vertical; background: #fff; color: #241430; }\n.human-approval__actions { display: flex; gap: 10px; }\n.human-approval__btn { font: 600 14px system-ui, sans-serif; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; }\n.human-approval__btn--approve { background: var(--accent); color: #241430; }\n.human-approval__btn--reject { background: transparent; border-color: #24143040; color: #241430; }\n.human-approval__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</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:{{accent}};\">\n <p class=\"m-0 mb-3\">{{request}}</p>\n <div class=\"human-approval-tw__status human-approval-tw__status--{{status}} inline-flex items-center gap-1.5 text-xs font-bold capitalize px-2.5 py-1 rounded-full mb-3\">\n <span class=\"human-approval-tw__status-dot w-1.5 h-1.5 rounded-full\" aria-hidden=\"true\"></span>\n {{status}}\n </div>\n {{#if requireReason}}\n <div class=\"flex flex-col gap-1 mb-3.5 text-[13px]\">\n <label for=\"human-approval-tw-reason-field\">Reason (required before deciding)</label>\n <textarea id=\"human-approval-tw-reason-field\" rows=\"2\" placeholder=\"Why are you approving or rejecting this?\" class=\"font-inherit p-2 rounded-lg border border-[#24143030] resize-y bg-white text-[#241430]\"></textarea>\n </div>\n {{/if}}\n <div class=\"flex gap-2.5\">\n <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>\n <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>\n </div>\n</div>\n<style>\n.human-approval-tw__status--pending { background: #24143012; color: #241430; }\n.human-approval-tw__status--pending .human-approval-tw__status-dot { background: var(--accent); }\n.human-approval-tw__status--approved { background: #A8E6C140; color: #1c5c3a; }\n.human-approval-tw__status--approved .human-approval-tw__status-dot { background: #2f8f5b; }\n.human-approval-tw__status--rejected { background: #F5C2E040; color: #7a1f4a; }\n.human-approval-tw__status--rejected .human-approval-tw__status-dot { background: #c23b6f; }\n</style>", "react": "export function HumanApproval({\n request = \"{{request}}\",\n status = \"{{status}}\",\n accent = \"{{accent}}\",\n requireReason = {{requireReason}},\n}) {\n const statusStyle = {\n pending: { background: \"#24143012\", color: \"#241430\", dot: accent },\n approved: { background: \"#A8E6C140\", color: \"#1c5c3a\", dot: \"#2f8f5b\" },\n rejected: { background: \"#F5C2E040\", color: \"#7a1f4a\", dot: \"#c23b6f\" },\n }[status] ?? { background: \"#24143012\", color: \"#241430\", dot: accent };\n return (\n <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\" }}>\n <p style={{ margin: \"0 0 12px\" }}>{request}</p>\n <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 }}>\n <span aria-hidden=\"true\" style={{ width: 7, height: 7, borderRadius: \"50%\", background: statusStyle.dot }} />\n {status}\n </div>\n {requireReason && (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4, marginBottom: 14, fontSize: 13 }}>\n <label htmlFor=\"human-approval-react-reason\">Reason (required before deciding)</label>\n <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\" }} />\n </div>\n )}\n <div style={{ display: \"flex\", gap: 10 }}>\n <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>\n <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>\n </div>\n </div>\n );\n}" }