Edit System Notification

Name

Also known as (comma separated)

Brief definition Application/system event.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Scheduled maintenance" }, { "id": "detail", "type": "text", "label": "Detail", "default": "The service will be unavailable for 10 minutes starting at midnight." }, { "id": "severity", "type": "select", "label": "Severity", "default": "info", "options": [ "info", "warning", "critical" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#E8A020", "#F5C2E0", "#A8E6C1", "#D9C8F0", "#241430" ] }, { "id": "dismissible", "type": "toggle", "label": "Dismissible", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sysnote sysnote--{{severity}}\" style=\"border-color:{{accent}};\" role=\"status\">\n <span class=\"sysnote__icon\" style=\"background:{{accent}};\" aria-hidden=\"true\"></span>\n <div class=\"sysnote__body\">\n <p class=\"sysnote__title\">{{title}}</p>\n <p class=\"sysnote__detail\">{{detail}}</p>\n </div>\n {{#if dismissible}}<button class=\"sysnote__close\" type=\"button\" aria-label=\"Dismiss\">×</button>{{/if}}\n</div>\n<style>\n.sysnote { display: flex; align-items: flex-start; gap: 10px; width: 340px; box-sizing: border-box; padding: 12px 14px; background: #FAF7F2; color: #241430; border: 1.5px solid; border-radius: 10px; font: 13px/1.4 system-ui, sans-serif; }\n.sysnote__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; position: relative; margin-top: 1px; }\n.sysnote__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }\n.sysnote--info .sysnote__icon::before { content: \"i\"; }\n.sysnote--warning .sysnote__icon::before { content: \"!\"; }\n.sysnote--critical .sysnote__icon::before { content: \"×\"; }\n.sysnote__body { flex: 1; }\n.sysnote__title { margin: 0 0 2px; font-weight: 600; }\n.sysnote__detail { margin: 0; color: #241430cc; }\n.sysnote__close { border: none; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }\n.sysnote__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div role=\"status\" class=\"sysnote-tw sysnote-tw--{{severity}} flex items-start gap-2.5 w-[340px] box-border p-3.5 bg-[#FAF7F2] text-[#241430] border-[1.5px] rounded-lg text-[13px]\" style=\"border-color:{{accent}}\">\n <span aria-hidden=\"true\" class=\"sysnote-tw__icon w-5 h-5 rounded-full flex-shrink-0 relative mt-px\" style=\"background:{{accent}}\"></span>\n <div class=\"flex-1\">\n <p class=\"m-0 mb-0.5 font-semibold\">{{title}}</p>\n <p class=\"m-0 text-[#241430]/80\">{{detail}}</p>\n </div>\n {{#if dismissible}}<button type=\"button\" aria-label=\"Dismiss\" class=\"border-0 bg-transparent text-[15px] leading-none cursor-pointer p-0\">×</button>{{/if}}\n</div>\n<style>\n.sysnote-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }\n.sysnote-tw--info .sysnote-tw__icon::before { content: \"i\"; }\n.sysnote-tw--warning .sysnote-tw__icon::before { content: \"!\"; }\n.sysnote-tw--critical .sysnote-tw__icon::before { content: \"×\"; }\n</style>", "react": "export function SystemNotification({\n title = \"{{title}}\",\n detail = \"{{detail}}\",\n severity = \"{{severity}}\",\n accent = \"{{accent}}\",\n dismissible = {{dismissible}},\n}) {\n const icon = { info: \"i\", warning: \"!\", critical: \"×\" }[severity] ?? \"•\";\n return (\n <div role=\"status\" style={{ display: \"flex\", alignItems: \"flex-start\", gap: 10, width: 340, boxSizing: \"border-box\",\n padding: \"12px 14px\", background: \"#FAF7F2\", color: \"#241430\", border: `1.5px solid ${accent}`, borderRadius: 10, fontSize: 13 }}>\n <span aria-hidden=\"true\" style={{ width: 20, height: 20, borderRadius: \"50%\", background: accent, flexShrink: 0, marginTop: 1,\n display: \"grid\", placeItems: \"center\", color: \"#FAF7F2\", fontSize: 11, fontWeight: 700 }}>{icon}</span>\n <div style={{ flex: 1 }}>\n <p style={{ margin: \"0 0 2px\", fontWeight: 600 }}>{title}</p>\n <p style={{ margin: 0, color: \"#241430cc\" }}>{detail}</p>\n </div>\n {dismissible && (\n <button type=\"button\" aria-label=\"Dismiss\" style={{ border: \"none\", background: \"transparent\", fontSize: 15, cursor: \"pointer\", padding: 0 }}>×</button>\n )}\n </div>\n );\n}" }