Edit Notification Toast

Name

Also known as (comma separated)

Brief definition Temporary notification.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "actor", "type": "text", "label": "Actor", "default": "Priya Shah" }, { "id": "message", "type": "text", "label": "Message", "default": "left a comment on Q3 plan" }, { "id": "kind", "type": "select", "label": "Kind", "default": "comment", "options": [ "comment", "mention", "system" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "persistent", "type": "toggle", "label": "Persistent (no auto-dismiss)", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ntoast ntoast--{{kind}}\" style=\"border-left-color:{{accent}};\" role=\"status\">\n <span class=\"ntoast__avatar\" style=\"background:{{accent}};\" aria-hidden=\"true\">{{actor}}</span>\n <div class=\"ntoast__body\">\n <p class=\"ntoast__text\"><strong>{{actor}}</strong> {{message}}</p>\n <time class=\"ntoast__time\" datetime=\"2026-08-18T09:14\">Just now</time>\n </div>\n {{#if persistent}}<span class=\"ntoast__pin\" aria-hidden=\"true\">📌</span>{{/if}}\n</div>\n<style>\n.ntoast { display: flex; align-items: flex-start; gap: 10px; width: 300px; box-sizing: border-box; padding: 12px 14px; background: #FAF7F2; color: #241430; border-radius: 10px; border-left: 4px solid; box-shadow: 0 10px 28px rgba(36,20,48,.2); font: 13px/1.4 system-ui, sans-serif; }\n.ntoast__avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font: 700 10px system-ui, sans-serif; color: #FAF7F2; overflow: hidden; text-indent: -999px; position: relative; }\n.ntoast__avatar::before { position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; color: #FAF7F2; }\n.ntoast--comment .ntoast__avatar::before { content: \"💬\"; }\n.ntoast--mention .ntoast__avatar::before { content: \"@\"; }\n.ntoast--system .ntoast__avatar::before { content: \"⚙\"; }\n.ntoast__body { flex: 1; }\n.ntoast__text { margin: 0; }\n.ntoast__time { color: #24143080; font-size: 11px; }\n.ntoast__pin { flex-shrink: 0; }\n</style>", "tailwind": "<div role=\"status\" class=\"ntoast-tw ntoast-tw--{{kind}} flex items-start gap-2.5 w-72 box-border p-3.5 bg-[#FAF7F2] text-[#241430] rounded-lg border-l-4 shadow-lg text-[13px]\" style=\"border-left-color:{{accent}}\">\n <span aria-hidden=\"true\" class=\"ntoast-tw__avatar w-7 h-7 rounded-full flex-shrink-0 grid place-items-center relative overflow-hidden\" style=\"background:{{accent}}\"></span>\n <div class=\"flex-1\">\n <p class=\"m-0\"><strong>{{actor}}</strong> {{message}}</p>\n <time class=\"text-[#241430]/50 text-[11px]\" datetime=\"2026-08-18T09:14\">Just now</time>\n </div>\n {{#if persistent}}<span aria-hidden=\"true\" class=\"flex-shrink-0\">📌</span>{{/if}}\n</div>\n<style>\n.ntoast-tw__avatar::before { position: absolute; inset: 0; display: grid; place-items: center; color: #FAF7F2; font-size: 12px; font-weight: 700; }\n.ntoast-tw--comment .ntoast-tw__avatar::before { content: \"💬\"; }\n.ntoast-tw--mention .ntoast-tw__avatar::before { content: \"@\"; }\n.ntoast-tw--system .ntoast-tw__avatar::before { content: \"⚙\"; }\n</style>", "react": "export function NotificationToast({\n actor = \"{{actor}}\",\n message = \"{{message}}\",\n kind = \"{{kind}}\",\n accent = \"{{accent}}\",\n persistent = {{persistent}},\n}) {\n const icon = { comment: \"💬\", mention: \"@\", system: \"⚙\" }[kind] ?? \"•\";\n return (\n <div role=\"status\" style={{ display: \"flex\", alignItems: \"flex-start\", gap: 10, width: 300, boxSizing: \"border-box\",\n padding: \"12px 14px\", background: \"#FAF7F2\", color: \"#241430\", borderRadius: 10,\n borderLeft: `4px solid ${accent}`, boxShadow: \"0 10px 28px rgba(36,20,48,.2)\", fontSize: 13 }}>\n <span aria-hidden=\"true\" style={{ width: 28, height: 28, borderRadius: \"50%\", background: accent, flexShrink: 0,\n display: \"grid\", placeItems: \"center\", color: \"#FAF7F2\", fontSize: 12, fontWeight: 700 }}>{icon}</span>\n <div style={{ flex: 1 }}>\n <p style={{ margin: 0 }}><strong>{actor}</strong> {message}</p>\n <time style={{ color: \"#24143080\", fontSize: 11 }} dateTime=\"2026-08-18T09:14\">Just now</time>\n </div>\n {persistent && <span aria-hidden=\"true\">📌</span>}\n </div>\n );\n}" }