Edit Modal

Name

Also known as (comma separated)

Brief definition Blocking overlay requiring interaction.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Delete this item?" }, { "id": "message", "type": "text", "label": "Message", "default": "This can't be undone. The item will be permanently removed." }, { "id": "variant", "type": "select", "label": "Variant", "default": "danger", "options": [ "neutral", "success", "danger" ] }, { "id": "width", "type": "number", "label": "Width", "default": 380, "min": 280, "max": 640, "step": 20 }, { "id": "backdrop", "type": "toggle", "label": "Show backdrop", "default": true }, { "id": "accent", "type": "color", "label": "Confirm colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"modal-demo{{#if backdrop}} modal-demo--backdrop{{/if}}\">\n <div class=\"modal modal--{{variant}}\" style=\"width:{{width}}px;\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\">\n <h3 class=\"modal__title\" id=\"modal-title\">{{title}}</h3>\n <p class=\"modal__message\">{{message}}</p>\n <div class=\"modal__actions\">\n <button class=\"modal__btn modal__btn--ghost\" type=\"button\">Cancel</button>\n <button class=\"modal__btn modal__btn--solid\" style=\"background:{{accent}};border-color:{{accent}};\" type=\"button\">Confirm</button>\n </div>\n </div>\n</div>\n<style>\n.modal-demo { display: grid; place-items: center; min-height: 220px; border-radius: 12px; }\n.modal-demo--backdrop { background: rgba(36,20,48,.45); padding: 24px; }\n.modal { font: 16px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; border-top: 6px solid; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 24px; box-sizing: border-box; }\n.modal--neutral { border-top-color: #241430; }\n.modal--success { border-top-color: #A8E6C1; }\n.modal--danger { border-top-color: #F5C2E0; }\n.modal__title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }\n.modal__message { margin: 0 0 20px; font-size: 14px; color: #241430cc; }\n.modal__actions { display: flex; justify-content: flex-end; gap: 10px; }\n.modal__btn { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }\n.modal__btn--ghost { background: transparent; border-color: #24143033; color: #241430; }\n.modal__btn--solid { color: #FAF7F2; }\n.modal__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"grid place-items-center min-h-[220px] rounded-xl{{#if backdrop}} bg-[#241430]/45 p-6{{/if}}\">\n <div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-tw-title\" class=\"modal-tw modal-tw--{{variant}} bg-[#FAF7F2] text-[#241430] rounded-2xl border-t-[6px] shadow-2xl p-6 box-border\" style=\"width:{{width}}px;\">\n <h3 id=\"modal-tw-title\" class=\"mb-2 text-lg font-semibold\">{{title}}</h3>\n <p class=\"mb-5 text-sm text-[#241430]/80\">{{message}}</p>\n <div class=\"flex justify-end gap-2.5\">\n <button type=\"button\" class=\"px-4 py-2 rounded-lg text-sm font-medium border border-[#24143033]\">Cancel</button>\n <button type=\"button\" class=\"px-4 py-2 rounded-lg text-sm font-medium text-[#FAF7F2]\" style=\"background:{{accent}};border-color:{{accent}}\">Confirm</button>\n </div>\n </div>\n</div>\n<style>\n.modal-tw--neutral { border-top-color: #241430; }\n.modal-tw--success { border-top-color: #A8E6C1; }\n.modal-tw--danger { border-top-color: #F5C2E0; }\n</style>", "react": "export function Modal({\n title = \"{{title}}\",\n message = \"{{message}}\",\n variant = \"{{variant}}\",\n width = {{width}},\n backdrop = {{backdrop}},\n accent = \"{{accent}}\",\n}) {\n const stripe = { neutral: \"#241430\", success: \"#A8E6C1\", danger: \"#F5C2E0\" }[variant] ?? accent;\n return (\n <div style={{ display: \"grid\", placeItems: \"center\", minHeight: 220, borderRadius: 12,\n background: backdrop ? \"rgba(36,20,48,.45)\" : \"transparent\", padding: backdrop ? 24 : 0 }}>\n <div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\" style={{ width, boxSizing: \"border-box\", background: \"#FAF7F2\", color: \"#241430\", borderRadius: 14,\n borderTop: `6px solid ${stripe}`, boxShadow: \"0 20px 44px rgba(36,20,48,.28)\", padding: 24 }}>\n <h3 id=\"modal-title\" style={{ margin: \"0 0 8px\", fontSize: 18, fontWeight: 600 }}>{title}</h3>\n <p style={{ margin: \"0 0 20px\", fontSize: 14, color: \"#241430cc\" }}>{message}</p>\n <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 10 }}>\n <button type=\"button\">Cancel</button>\n <button type=\"button\" style={{ background: accent, borderColor: accent, color: \"#FAF7F2\" }}>Confirm</button>\n </div>\n </div>\n </div>\n );\n}" }