Edit Toast

Name

Also known as (comma separated)

Brief definition Temporary notification.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "Your changes have been saved" }, { "id": "variant", "type": "select", "label": "Variant", "default": "success", "options": [ "success", "info", "warning", "error" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#E8A020", "#F5C2E0", "#D9C8F0", "#241430" ] }, { "id": "duration", "type": "number", "label": "Auto-dismiss (seconds)", "default": 4, "min": 2, "max": 10, "step": 1 }, { "id": "dismissible", "type": "toggle", "label": "Show close button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"toast toast--{{variant}}\" style=\"border-left-color:{{accent}};\" role=\"status\">\n <div class=\"toast__row\">\n <span class=\"toast__icon\" style=\"background:{{accent}};\" aria-hidden=\"true\"></span>\n <p class=\"toast__message\">{{message}}</p>\n {{#if dismissible}}<button class=\"toast__close\" type=\"button\" aria-label=\"Dismiss\">×</button>{{/if}}\n </div>\n <p class=\"toast__timer\">Auto-dismiss after {{duration}}s</p>\n</div>\n<style>\n.toast { display: flex; flex-direction: column; gap: 4px; max-width: 320px; padding: 14px 16px; box-sizing: border-box;\n background: #FAF7F2; color: #241430; border-radius: 10px; border-left: 4px solid;\n box-shadow: 0 10px 28px rgba(36,20,48,.2); font: 14px/1.4 system-ui, sans-serif; }\n.toast__row { display: flex; align-items: center; gap: 10px; }\n.toast__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; position: relative; }\n.toast__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; color: #FAF7F2; }\n.toast--success .toast__icon::before { content: \"✓\"; }\n.toast--info .toast__icon::before { content: \"i\"; }\n.toast--warning .toast__icon::before { content: \"!\"; }\n.toast--error .toast__icon::before { content: \"×\"; }\n.toast__message { margin: 0; flex: 1; }\n.toast__close { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }\n.toast__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n.toast__timer { margin: 0; font-size: 11px; color: #24143080; padding-left: 30px; }\n</style>", "tailwind": "<div role=\"status\" class=\"toast-tw toast-tw--{{variant}} flex flex-col gap-1 max-w-xs rounded-lg bg-[#FAF7F2] text-[#241430] shadow-lg p-3.5 border-l-4 box-border\" style=\"border-left-color:{{accent}}\">\n <div class=\"flex items-center gap-2.5\">\n <span class=\"toast-tw__icon w-5 h-5 rounded-full flex-shrink-0\" style=\"background:{{accent}}\" aria-hidden=\"true\"></span>\n <p class=\"flex-1 m-0 text-sm\">{{message}}</p>\n {{#if dismissible}}<button type=\"button\" aria-label=\"Dismiss\" class=\"border-0 bg-transparent text-base leading-none cursor-pointer p-0\">×</button>{{/if}}\n </div>\n <p class=\"m-0 text-[11px] text-[#241430]/50 pl-5\">Auto-dismiss after {{duration}}s</p>\n</div>\n<style>\n.toast-tw__icon { position: relative; }\n.toast-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; color: #FAF7F2; }\n.toast-tw--success .toast-tw__icon::before { content: \"✓\"; }\n.toast-tw--info .toast-tw__icon::before { content: \"i\"; }\n.toast-tw--warning .toast-tw__icon::before { content: \"!\"; }\n.toast-tw--error .toast-tw__icon::before { content: \"×\"; }\n</style>", "react": "export function Toast({\n message = \"{{message}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n duration = {{duration}},\n dismissible = {{dismissible}},\n}) {\n const icon = { success: \"✓\", info: \"i\", warning: \"!\", error: \"×\" }[variant] ?? \"•\";\n return (\n <div role=\"status\" style={{ display: \"flex\", flexDirection: \"column\", gap: 4, maxWidth: 320, boxSizing: \"border-box\",\n background: \"#FAF7F2\", color: \"#241430\", borderRadius: 10,\n borderLeft: `4px solid ${accent}`, boxShadow: \"0 10px 28px rgba(36,20,48,.2)\", padding: \"14px 16px\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <span style={{ width: 20, height: 20, borderRadius: \"50%\", background: accent, flexShrink: 0,\n display: \"grid\", placeItems: \"center\", color: \"#FAF7F2\", fontSize: 12, fontWeight: 700 }}>{icon}</span>\n <p style={{ flex: 1, margin: 0, fontSize: 14 }}>{message}</p>\n {dismissible && (\n <button type=\"button\" aria-label=\"Dismiss\" style={{ border: \"none\", background: \"transparent\", fontSize: 16, cursor: \"pointer\", padding: 0 }}>×</button>\n )}\n </div>\n <p style={{ margin: 0, fontSize: 11, color: \"#24143080\", paddingLeft: 30 }}>Auto-dismiss after {duration}s</p>\n </div>\n );\n}" }