Edit Poor Empty State

Name

Also known as (comma separated)

Brief definition Empty interface without useful guidance.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "No data" }, { "id": "fixed", "type": "toggle", "label": "Fixed (helpful)", "default": false }, { "id": "ctaLabel", "type": "text", "label": "Call to action", "default": "Create your first project" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pe-demo\" style=\"--accent:{{accent}};\">\n <span class=\"pe-demo__badge{{#if fixed}} pe-demo__badge--good{{/if}}\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: poor empty state{{/unless}}</span>\n {{unless fixed}}\n <div class=\"pe-demo__blank\"><p>{{message}}</p></div>\n {{/unless}}\n {{#if fixed}}\n <div class=\"pe-demo__rich\">\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\" /><path d=\"M9 12h6M12 9v6\" /></svg>\n <p class=\"pe-demo__msg\">{{message}}</p>\n <p class=\"pe-demo__hint\">Projects keep your work organised by client.</p>\n <button type=\"button\" class=\"pe-demo__cta\">{{ctaLabel}}</button>\n </div>\n {{/if}}\n</div>\n<style>\n.pe-demo { width: 280px; font: 13px system-ui, sans-serif; color: #241430; }\n.pe-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.pe-demo__badge--good { background: #1a7a44; }\n.pe-demo__blank { padding: 40px 16px; text-align: center; color: #241430aa; border: 1px solid #24143014; }\n.pe-demo__rich { padding: 30px 20px; text-align: center; border-radius: 12px; background: #24143008; color: var(--accent); }\n.pe-demo__msg { margin: 10px 0 4px; font-weight: 700; color: #241430; font-size: 15px; }\n.pe-demo__hint { margin: 0 0 14px; font-size: 12px; color: #241430aa; }\n.pe-demo__cta { border: none; border-radius: 8px; padding: 10px 18px; background: var(--accent); color: #241430; font-weight: 700; cursor: pointer; }\n</style>", "tailwind": "<div style=\"width:280px;font-family:system-ui,sans-serif;color:#241430\">\n <span class=\"pe-tw-badge{{#if fixed}} pe-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: poor empty state{{/unless}}</span>\n {{unless fixed}}\n <div class=\"px-4 py-10 text-center text-[#241430aa] border\" style=\"border-color:#24143014\"><p class=\"m-0\">{{message}}</p></div>\n {{/unless}}\n {{#if fixed}}\n <div class=\"px-5 py-7.5 text-center rounded-xl bg-[#24143008]\" style=\"color:{{accent}}\">\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\" /><path d=\"M9 12h6M12 9v6\" /></svg>\n <p class=\"mt-2.5 mb-1 font-bold text-[15px]\" style=\"color:#241430\">{{message}}</p>\n <p class=\"m-0 mb-3.5 text-xs text-[#241430aa]\">Projects keep your work organised by client.</p>\n <button type=\"button\" class=\"border-0 rounded-lg px-4.5 py-2.5 font-bold cursor-pointer\" style=\"background:{{accent}};color:#241430\">{{ctaLabel}}</button>\n </div>\n {{/if}}\n</div>\n<style>\n.pe-tw-badge { background: #b3261e; color: #FAF7F2; }\n.pe-tw-badge--good { background: #1a7a44; color: #FAF7F2; }\n</style>", "react": "export function PoorEmptyState({\n message = \"{{message}}\",\n fixed = {{fixed}},\n ctaLabel = \"{{ctaLabel}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: 280, 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: poor empty state\"}\n </span>\n {!fixed && <div style={{ padding: \"40px 16px\", textAlign: \"center\", color: \"#241430aa\", border: \"1px solid #24143014\" }}><p style={{ margin: 0 }}>{message}</p></div>}\n {fixed && (\n <div style={{ padding: \"30px 20px\", textAlign: \"center\", borderRadius: 12, background: \"#24143008\", color: accent }}>\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\" /><path d=\"M9 12h6M12 9v6\" /></svg>\n <p style={{ margin: \"10px 0 4px\", fontWeight: 700, color: \"#241430\", fontSize: 15 }}>{message}</p>\n <p style={{ margin: \"0 0 14px\", fontSize: 12, color: \"#241430aa\" }}>Projects keep your work organised by client.</p>\n <button type=\"button\" style={{ border: \"none\", borderRadius: 8, padding: \"10px 18px\", background: accent, color: \"#241430\", fontWeight: 700, cursor: \"pointer\" }}>{ctaLabel}</button>\n </div>\n )}\n </div>\n );\n}" }