Edit Modal Overuse · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"mo-demo\" style=\"--accent:{{accent}};\">\n  <span class=\"mo-demo__badge{{#if fixed}} mo-demo__badge--good{{/if}}\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: modal overuse (stacked dialogs){{/unless}}</span>\n  {{unless fixed}}\n  <div class=\"mo-demo__stack\">\n    <div class=\"mo-demo__layer mo-demo__layer--3\"></div>\n    <div class=\"mo-demo__layer mo-demo__layer--2\"></div>\n    <div class=\"mo-demo__layer mo-demo__layer--1\">\n      <p class=\"mo-demo__title\">{{title}}</p>\n      <p class=\"mo-demo__body\">Dialog 3 of 3, on top of two more</p>\n      <button type=\"button\" class=\"mo-demo__btn\">OK</button>\n    </div>\n  </div>\n  {{/unless}}\n  {{#if fixed}}\n  <div class=\"mo-demo__inline\">\n    <p class=\"mo-demo__title\">{{title}}</p>\n    <p class=\"mo-demo__body\">One inline panel, no stacking</p>\n    <button type=\"button\" class=\"mo-demo__btn\">OK</button>\n  </div>\n  {{/if}}\n</div>\n<style>\n.mo-demo { width: 300px; font: 13px system-ui, sans-serif; color: #241430; }\n.mo-demo__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 10px; background: #b3261e; color: #FAF7F2; }\n.mo-demo__badge--good { background: #1a7a44; }\n.mo-demo__stack { position: relative; height: 130px; }\n.mo-demo__layer { position: absolute; border-radius: 10px; background: #FAF7F2; box-shadow: 0 10px 26px rgba(36,20,48,.22); border: 1.5px solid #24143014; }\n.mo-demo__layer--3 { inset: 16px 8px 8px 16px; opacity: .5; }\n.mo-demo__layer--2 { inset: 8px 4px 4px 8px; opacity: .75; }\n.mo-demo__layer--1 { inset: 0; padding: 14px; }\n.mo-demo__title { margin: 0 0 4px; font-weight: 700; }\n.mo-demo__body { margin: 0 0 10px; color: #241430aa; font-size: 12px; }\n.mo-demo__btn { border: none; background: var(--accent); border-radius: 7px; padding: 7px 16px; font-weight: 700; cursor: pointer; }\n.mo-demo__inline { border-radius: 10px; border: 1.5px solid var(--accent); padding: 14px; }\n</style>",
  "tailwind": "<div style=\"width:300px;font-family:system-ui,sans-serif;color:#241430\">\n  <span class=\"mo-tw-badge{{#if fixed}} mo-tw-badge--good{{/if}} inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: modal overuse (stacked dialogs){{/unless}}</span>\n  {{unless fixed}}\n  <div class=\"relative h-[130px]\">\n    <div class=\"absolute rounded-lg opacity-50\" style=\"inset:16px 8px 8px 16px;background:#FAF7F2;box-shadow:0 10px 26px rgba(36,20,48,.22);border:1.5px solid #24143014\"></div>\n    <div class=\"absolute rounded-lg opacity-75\" style=\"inset:8px 4px 4px 8px;background:#FAF7F2;box-shadow:0 10px 26px rgba(36,20,48,.22);border:1.5px solid #24143014\"></div>\n    <div class=\"absolute inset-0 p-3.5 rounded-lg\" style=\"background:#FAF7F2;box-shadow:0 10px 26px rgba(36,20,48,.22);border:1.5px solid #24143014\">\n      <p class=\"m-0 mb-1 font-bold\">{{title}}</p>\n      <p class=\"m-0 mb-2.5 text-xs text-[#241430aa]\">Dialog 3 of 3, on top of two more</p>\n      <button type=\"button\" class=\"border-0 rounded-md px-4 py-1.5 font-bold cursor-pointer\" style=\"background:{{accent}}\">OK</button>\n    </div>\n  </div>\n  {{/unless}}\n  {{#if fixed}}\n  <div class=\"rounded-lg p-3.5\" style=\"border:1.5px solid {{accent}}\">\n    <p class=\"m-0 mb-1 font-bold\">{{title}}</p>\n    <p class=\"m-0 mb-2.5 text-xs text-[#241430aa]\">One inline panel, no stacking</p>\n    <button type=\"button\" class=\"border-0 rounded-md px-4 py-1.5 font-bold cursor-pointer\" style=\"background:{{accent}}\">OK</button>\n  </div>\n  {{/if}}\n</div>\n<style>\n.mo-tw-badge { background: #b3261e; color: #FAF7F2; }\n.mo-tw-badge--good { background: #1a7a44; color: #FAF7F2; }\n</style>",
  "react": "export function ModalOveruse({\n  title = \"{{title}}\",\n  fixed = {{fixed}},\n  accent = \"{{accent}}\",\n}) {\n  const layer = { position: \"absolute\", borderRadius: 10, background: \"#FAF7F2\", boxShadow: \"0 10px 26px rgba(36,20,48,.22)\", border: \"1.5px solid #24143014\" };\n  return (\n    <div style={{ width: 300, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430\" }}>\n      <span style={{ display: \"inline-block\", padding: \"3px 10px\", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? \"#1a7a44\" : \"#b3261e\", color: \"#FAF7F2\" }}>\n        {fixed ? \"\\u2713 Better\" : \"\\u2717 Anti-pattern: modal overuse (stacked dialogs)\"}\n      </span>\n      {!fixed && (\n        <div style={{ position: \"relative\", height: 130 }}>\n          <div style={{ ...layer, inset: \"16px 8px 8px 16px\", opacity: .5 }} />\n          <div style={{ ...layer, inset: \"8px 4px 4px 8px\", opacity: .75 }} />\n          <div style={{ ...layer, inset: 0, padding: 14 }}>\n            <p style={{ margin: \"0 0 4px\", fontWeight: 700 }}>{title}</p>\n            <p style={{ margin: \"0 0 10px\", color: \"#241430aa\", fontSize: 12 }}>Dialog 3 of 3, on top of two more</p>\n            <button type=\"button\" style={{ border: \"none\", background: accent, borderRadius: 7, padding: \"7px 16px\", fontWeight: 700, cursor: \"pointer\" }}>OK</button>\n          </div>\n        </div>\n      )}\n      {fixed && (\n        <div style={{ borderRadius: 10, border: \"1.5px solid \" + accent, padding: 14 }}>\n          <p style={{ margin: \"0 0 4px\", fontWeight: 700 }}>{title}</p>\n          <p style={{ margin: \"0 0 10px\", color: \"#241430aa\", fontSize: 12 }}>One inline panel, no stacking</p>\n          <button type=\"button\" style={{ border: \"none\", background: accent, borderRadius: 7, padding: \"7px 16px\", fontWeight: 700, cursor: \"pointer\" }}>OK</button>\n        </div>\n      )}\n    </div>\n  );\n}"
}