Edit Download Action

Name

Also known as (comma separated)

Brief definition Downloads a file.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "fileName", "type": "text", "label": "File name", "default": "invoice-8842.pdf" }, { "id": "fileSize", "type": "text", "label": "File size", "default": "1.2 MB" }, { "id": "state", "type": "select", "label": "State", "default": "Idle", "options": [ "Idle", "Downloading", "Complete" ] }, { "id": "progress", "type": "number", "label": "Progress %", "default": 45, "min": 0, "max": 100, "step": 5 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dl\" data-state=\"{{state}}\" style=\"--accent:{{accent}};\">\n <div class=\"dl__row\">\n <div>\n <p class=\"dl__name\">{{fileName}}</p>\n <p class=\"dl__size\">{{fileSize}}</p>\n </div>\n <button type=\"button\" class=\"dl__btn\" aria-label=\"Download {{fileName}}\">&#8595;</button>\n </div>\n <div class=\"dl__progresswrap\"><div class=\"dl__progress\" role=\"progressbar\" aria-valuenow=\"{{progress}}\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Download progress for {{fileName}}\" style=\"width:{{progress}}%;\"></div></div>\n</div>\n<style>\n.dl { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 14px 16px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; }\n.dl__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.dl__name { margin: 0; font-weight: 700; }\n.dl__size { margin: 2px 0 0; font-size: 12px; color: #24143099; }\n.dl__btn { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid #24143030; background: none; cursor: pointer; font-size: 14px; }\n.dl[data-state=\"Complete\"] .dl__btn { background: var(--accent); border-color: var(--accent); }\n.dl__progresswrap { height: 5px; background: #24143012; border-radius: 999px; margin-top: 10px; overflow: hidden; display: none; }\n.dl[data-state=\"Downloading\"] .dl__progresswrap { display: block; }\n.dl__progress { height: 100%; background: var(--accent); border-radius: 999px; }\n.dl__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"w-[300px] p-[14px_16px] rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] dl-tw\" data-state=\"{{state}}\">\n <div class=\"flex items-center justify-between gap-2.5\">\n <div>\n <p class=\"m-0 font-bold\">{{fileName}}</p>\n <p class=\"mt-0.5 mb-0 text-xs text-[#241430]/60\">{{fileSize}}</p>\n </div>\n <button type=\"button\" class=\"dl-tw-btn flex-none w-8 h-8 rounded-full border-[1.5px] border-[#24143030] bg-none cursor-pointer text-sm\" aria-label=\"Download {{fileName}}\">&#8595;</button>\n </div>\n <div class=\"dl-tw-progresswrap h-[5px] bg-[#24143012] rounded-full mt-2.5 overflow-hidden hidden\"><div class=\"h-full rounded-full\" role=\"progressbar\" aria-valuenow=\"{{progress}}\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Download progress for {{fileName}}\" style=\"width:{{progress}}%;background:{{accent}}\"></div></div>\n</div>\n<style>\n.dl-tw[data-state=\"Complete\"] .dl-tw-btn { background: {{accent}}; border-color: {{accent}}; }\n.dl-tw[data-state=\"Downloading\"] .dl-tw-progresswrap { display: block; }\n</style>", "react": "export function DownloadAction({\n fileName = \"{{fileName}}\",\n fileSize = \"{{fileSize}}\",\n state = \"{{state}}\",\n progress = {{progress}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: \"14px 16px\", borderRadius: 10, boxSizing: \"border-box\", border: \"1px solid #24143018\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", gap: 10 }}>\n <div>\n <p style={{ margin: 0, fontWeight: 700 }}>{fileName}</p>\n <p style={{ margin: \"2px 0 0\", fontSize: 12, color: \"#24143099\" }}>{fileSize}</p>\n </div>\n <button type=\"button\" aria-label={`Download ${fileName}`}\n style={{ flex: \"none\", width: 32, height: 32, borderRadius: 999, border: \"1.5px solid #24143030\", background: state === \"Complete\" ? accent : \"none\", borderColor: state === \"Complete\" ? accent : \"#24143030\", cursor: \"pointer\", fontSize: 14 }}>&#8595;</button>\n </div>\n {state === \"Downloading\" && (\n <div style={{ height: 5, background: \"#24143012\", borderRadius: 999, marginTop: 10, overflow: \"hidden\" }}>\n <div role=\"progressbar\" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100} aria-label={`Download progress for ${fileName}`}\n style={{ height: \"100%\", width: `${progress}%`, background: accent, borderRadius: 999 }} />\n </div>\n )}\n </div>\n );\n}" }