Edit Error

Name

Also known as (comma separated)

Brief definition Operation failed.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Error message", "default": "Payment failed — your card was declined." }, { "id": "accent", "type": "color", "label": "Accent", "default": "#C0392B", "presets": [ "#C0392B", "#E8A020", "#241430", "#BFD9F2", "#D9C8F0", "#A8E6C1" ] }, { "id": "force", "type": "toggle", "label": "Show error", "default": true }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 20, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"err-demo\">\n <button class=\"err-btn\" type=\"button\">Pay now</button>\n {{#if force}}\n <div class=\"err-banner\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\" role=\"alert\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M12 8v5M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n <span>{{message}}</span>\n </div>\n {{/if}}\n</div>\n<style>\n.err-demo { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }\n.err-btn { font: 700 14px system-ui, sans-serif; padding: 10px 20px; border-radius: 8px; border: none; background: #241430; color: #FAF7F2; cursor: pointer; margin-bottom: 10px; }\n.err-banner { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 12%, #FAF7F2); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font-weight: 600; font-size: 13px; }\n</style>", "tailwind": "<div class=\"w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl\">\n <button type=\"button\" class=\"font-bold text-sm px-5 py-2.5 rounded-lg border-0 bg-[#241430] text-[#FAF7F2] cursor-pointer mb-2.5\">Pay now</button>\n {{#if force}}\n <div role=\"alert\" class=\"flex items-start gap-2 px-3.5 py-3 font-semibold text-[13px]\" style=\"background:color-mix(in srgb, {{accent}} 12%, #FAF7F2);border:1.5px solid color-mix(in srgb, {{accent}} 40%, transparent);color:{{accent}};border-radius:{{radius}}px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M12 8v5M12 16h.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\n <span>{{message}}</span>\n </div>\n {{/if}}\n</div>", "react": "export function ErrorState({\n message = \"{{message}}\",\n accent = \"{{accent}}\",\n force = {{force}},\n radius = {{radius}},\n}) {\n return (\n <div style={{ width: 300, boxSizing: \"border-box\", font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12 }}>\n <button type=\"button\" style={{ font: \"700 14px system-ui, sans-serif\", padding: \"10px 20px\", borderRadius: 8, border: \"none\", background: \"#241430\", color: \"#FAF7F2\", cursor: \"pointer\", marginBottom: 10 }}>Pay now</button>\n {force && (\n <div role=\"alert\" style={{ display: \"flex\", alignItems: \"flex-start\", gap: 8, padding: \"12px 14px\", borderRadius: radius, background: `color-mix(in srgb, ${accent} 12%, #FAF7F2)`, border: `1.5px solid color-mix(in srgb, ${accent} 40%, transparent)`, color: accent, fontWeight: 600, fontSize: 13 }}>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" /><path d=\"M12 8v5M12 16h.01\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n <span>{message}</span>\n </div>\n )}\n </div>\n );\n}" }