Edit Offline State

Name

Also known as (comma separated)

Brief definition Application cannot currently reach required services.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "You are offline" }, { "id": "message", "type": "text", "label": "Message", "default": "We cannot reach the server. Changes will sync once you reconnect." }, { "id": "lastSynced", "type": "text", "label": "Last synced", "default": "3 minutes ago" }, { "id": "retrying", "type": "toggle", "label": "Retrying", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"offline\" role=\"alert\">\n <span class=\"offline__icon{{#if retrying}} offline__icon--retrying{{/if}}\" aria-hidden=\"true\"></span>\n <div class=\"offline__body\">\n <p class=\"offline__title\">{{title}}</p>\n <p class=\"offline__message\">{{message}}</p>\n <p class=\"offline__meta\">Last synced {{lastSynced}}{{#if retrying}} · reconnecting…{{/if}}</p>\n </div>\n</div>\n<style>\n.offline { display: flex; align-items: flex-start; gap: 12px; max-width: 380px; padding: 14px 16px; box-sizing: border-box;\n border-radius: 10px; background: color-mix(in srgb, #8C1F17 8%, #FAF7F2); border: 1px solid #8C1F17; font: 13.5px/1.45 system-ui, sans-serif; color: #241430; }\n.offline__icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: #8C1F17; position: relative; margin-top: 1px; }\n.offline__icon::before { content: \"⚡\"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #FAF7F2; }\n@keyframes offline-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n .offline__icon--retrying { animation: offline-spin .2s linear infinite; }\n}\n.offline__title { margin: 0 0 2px; font-weight: 700; }\n.offline__message { margin: 0; color: #241430b3; }\n.offline__meta { margin: 6px 0 0; font-size: 11.5px; color: #8C1F17; font-weight: 600; }\n</style>", "tailwind": "<div role=\"alert\" class=\"offline-tw flex items-start gap-3 max-w-sm px-4 py-3.5 box-border rounded-lg border border-[#8C1F17] font-sans text-[13.5px] text-[#241430]\" style=\"background:color-mix(in srgb, #8C1F17 8%, #FAF7F2)\">\n <span aria-hidden=\"true\" class=\"offline-tw__icon{{#if retrying}} offline-tw__icon--retrying{{/if}} w-[22px] h-[22px] rounded-full flex-shrink-0 bg-[#8C1F17] mt-px grid place-items-center text-[11px] text-[#FAF7F2]\">⚡</span>\n <div>\n <p class=\"m-0 mb-0.5 font-bold\">{{title}}</p>\n <p class=\"m-0 text-[#241430]/70\">{{message}}</p>\n <p class=\"mt-1.5 mb-0 text-[11.5px] text-[#8C1F17] font-semibold\">Last synced {{lastSynced}}{{#if retrying}} · reconnecting…{{/if}}</p>\n </div>\n</div>\n<style>\n@keyframes offline-tw-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n .offline-tw__icon--retrying { animation: offline-tw-spin .2s linear infinite; }\n}\n</style>", "react": "export function OfflineState({\n title = \"{{title}}\",\n message = \"{{message}}\",\n lastSynced = \"{{lastSynced}}\",\n retrying = {{retrying}},\n}) {\n return (\n <div role=\"alert\" style={{ display: \"flex\", alignItems: \"flex-start\", gap: 12, maxWidth: 380, padding: \"14px 16px\",\n boxSizing: \"border-box\", borderRadius: 10, background: \"color-mix(in srgb, #8C1F17 8%, #FAF7F2)\",\n border: \"1px solid #8C1F17\", font: \"13.5px/1.45 system-ui, sans-serif\", color: \"#241430\" }}>\n <span aria-hidden=\"true\" className={retrying ? \"offline-react__icon offline-react__icon--retrying\" : \"offline-react__icon\"} style={{ width: 22, height: 22, borderRadius: \"50%\", flexShrink: 0, background: \"#8C1F17\",\n marginTop: 1, display: \"grid\", placeItems: \"center\", fontSize: 11, color: \"#FAF7F2\" }}>⚡</span>\n <div>\n <p style={{ margin: \"0 0 2px\", fontWeight: 700 }}>{title}</p>\n <p style={{ margin: 0, color: \"#241430b3\" }}>{message}</p>\n <p style={{ margin: \"6px 0 0\", fontSize: 11.5, color: \"#8C1F17\", fontWeight: 600 }}>Last synced {lastSynced}{retrying ? \" · reconnecting…\" : \"\"}</p>\n </div>\n <style>{`\n @keyframes offline-react-spin { to { transform: rotate(360deg); } }\n @media (prefers-reduced-motion: no-preference) {\n .offline-react__icon--retrying { animation: offline-react-spin .2s linear infinite; }\n }\n `}</style>\n </div>\n );\n}" }