Edit Widget Footer

Name

Also known as (comma separated)

Brief definition Optional supporting information/actions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "note", "type": "text", "label": "Note", "default": "Last updated 4 minutes ago" }, { "id": "actionLabel", "type": "text", "label": "Action label", "default": "View report" }, { "id": "showAction", "type": "toggle", "label": "Show action", "default": true }, { "id": "color", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<footer class=\"wfooter\" style=\"--c:{{color}};\">\n <span class=\"wfooter__note\">{{note}}</span>\n {{#if showAction}}<button type=\"button\" class=\"wfooter__action\">{{actionLabel}}</button>{{/if}}\n</footer>\n<style>\n.wfooter { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 12px system-ui, sans-serif; color: #241430; border-top: 1px solid #24143018; padding-top: 8px; margin-top: 8px; }\n.wfooter__note { opacity: .65; }\n.wfooter__action { background: transparent; border: 1.5px solid var(--c); border-radius: 8px; padding: 5px 10px; font: 600 12px system-ui, sans-serif; cursor: pointer; color: #241430; }\n.wfooter__action:hover, .wfooter__action:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }\n</style>", "tailwind": "<footer class=\"wfooter-tw flex justify-between items-center gap-2.5 font-sans text-xs text-[#241430] border-t border-[#24143018] pt-2 mt-2\" style=\"--c:{{color}};\">\n <span class=\"opacity-65\">{{note}}</span>\n {{#if showAction}}<button type=\"button\" class=\"bg-transparent border-[1.5px] rounded-lg px-2.5 py-1.5 text-xs font-semibold cursor-pointer\" style=\"border-color:var(--c);\">{{actionLabel}}</button>{{/if}}\n</footer>", "react": "export function WidgetFooter({\n note = \"{{note}}\",\n actionLabel = \"{{actionLabel}}\",\n showAction = {{showAction}},\n color = \"{{color}}\",\n}) {\n return (\n <footer style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", gap: 10, font: \"12px system-ui, sans-serif\", color: \"#241430\", borderTop: \"1px solid #24143018\", paddingTop: 8, marginTop: 8 }}>\n <span style={{ opacity: 0.65 }}>{note}</span>\n {showAction && (\n <button type=\"button\" style={{ background: \"transparent\", border: \"1.5px solid \" + color, borderRadius: 8, padding: \"5px 10px\", fontSize: 12, fontWeight: 600, cursor: \"pointer\", color: \"#241430\" }}>\n {actionLabel}\n </button>\n )}\n </footer>\n );\n}" }