Edit Retry State · 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=\"retry\" role=\"alert\">\n  <span class=\"retry__icon\" aria-hidden=\"true\">!</span>\n  <div class=\"retry__body\">\n    <p class=\"retry__message\">{{message}}</p>\n    <p class=\"retry__meta\">Attempt {{attempt}}</p>\n  </div>\n  <button type=\"button\" class=\"retry__button{{#if isRetrying}} retry__button--busy{{/if}}\">\n    {{#if isRetrying}}<span class=\"retry__spinner\" aria-hidden=\"true\"></span>{{/if}}\n    {{retryLabel}}\n  </button>\n</div>\n<style>\n.retry { display: flex; align-items: center; gap: 12px; max-width: 380px; padding: 12px 16px; box-sizing: border-box;\n  border-radius: 10px; background: color-mix(in srgb, #B3261E 8%, #FAF7F2); border: 1px solid #B3261E; font: 13.5px/1.4 system-ui, sans-serif; color: #241430; }\n.retry__icon { width: 22px; height: 22px; border-radius: 50%; background: #B3261E; color: #FAF7F2; flex-shrink: 0;\n  display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; }\n.retry__body { flex: 1; }\n.retry__message { margin: 0; font-weight: 700; }\n.retry__meta { margin: 2px 0 0; color: #241430b3; font-size: 12px; }\n.retry__button { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 8px; background: #241430;\n  color: #FAF7F2; font: 600 12.5px system-ui, sans-serif; padding: 8px 14px; cursor: pointer; white-space: nowrap; }\n.retry__button:hover { background: #3a2350; }\n.retry__button:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n.retry__button--busy { opacity: .75; cursor: progress; }\n.retry__spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #FAF7F244; border-top-color: #FAF7F2; }\n@keyframes retry-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n  .retry__spinner { animation: retry-spin .2s linear infinite; }\n}\n</style>",
  "tailwind": "<div role=\"alert\" class=\"retry-tw flex items-center gap-3 max-w-sm px-4 py-3 box-border rounded-lg border border-[#B3261E] font-sans text-[13.5px] text-[#241430]\" style=\"background:color-mix(in srgb, #B3261E 8%, #FAF7F2)\">\n  <span aria-hidden=\"true\" class=\"w-[22px] h-[22px] rounded-full bg-[#B3261E] text-[#FAF7F2] flex-shrink-0 grid place-items-center text-xs font-bold\">!</span>\n  <div class=\"flex-1\">\n    <p class=\"m-0 font-bold\">{{message}}</p>\n    <p class=\"mt-0.5 mb-0 text-[#241430]/70 text-xs\">Attempt {{attempt}}</p>\n  </div>\n  <button type=\"button\" class=\"retry-tw__button{{#if isRetrying}} retry-tw__button--busy{{/if}} inline-flex items-center gap-1.5 border-0 rounded-lg bg-[#241430] text-[#FAF7F2] font-semibold text-[12.5px] px-3.5 py-2 cursor-pointer whitespace-nowrap hover:bg-[#3a2350]\">\n    {{#if isRetrying}}<span aria-hidden=\"true\" class=\"retry-tw__spinner w-3 h-3 rounded-full border-2 border-[#FAF7F244]\" style=\"border-top-color:#FAF7F2\"></span>{{/if}}\n    {{retryLabel}}\n  </button>\n</div>\n<style>\n.retry-tw__button--busy { opacity: .75; cursor: progress; }\n@keyframes retry-tw-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: no-preference) {\n  .retry-tw__spinner { animation: retry-tw-spin .2s linear infinite; }\n}\n</style>",
  "react": "export function RetryState({\n  message = \"{{message}}\",\n  retryLabel = \"{{retryLabel}}\",\n  attempt = {{attempt}},\n  isRetrying = {{isRetrying}},\n}) {\n  return (\n    <div role=\"alert\" style={{ display: \"flex\", alignItems: \"center\", gap: 12, maxWidth: 380, padding: \"12px 16px\",\n      boxSizing: \"border-box\", borderRadius: 10, background: \"color-mix(in srgb, #B3261E 8%, #FAF7F2)\",\n      border: \"1px solid #B3261E\", font: \"13.5px/1.4 system-ui, sans-serif\", color: \"#241430\" }}>\n      <span aria-hidden=\"true\" style={{ width: 22, height: 22, borderRadius: \"50%\", background: \"#B3261E\", color: \"#FAF7F2\",\n        flexShrink: 0, display: \"grid\", placeItems: \"center\", fontSize: 12, fontWeight: 700 }}>!</span>\n      <div style={{ flex: 1 }}>\n        <p style={{ margin: 0, fontWeight: 700 }}>{message}</p>\n        <p style={{ margin: \"2px 0 0\", color: \"#241430b3\", fontSize: 12 }}>Attempt {attempt}</p>\n      </div>\n      <button type=\"button\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, border: \"none\", borderRadius: 8,\n        background: \"#241430\", color: \"#FAF7F2\", fontWeight: 600, fontSize: 12.5, padding: \"8px 14px\",\n        cursor: isRetrying ? \"progress\" : \"pointer\", opacity: isRetrying ? 0.75 : 1, whiteSpace: \"nowrap\" }}>\n        {isRetrying && <span aria-hidden=\"true\" className=\"retry-spinner\" style={{ width: 12, height: 12, borderRadius: \"50%\", border: \"2px solid #FAF7F244\",\n          borderTopColor: \"#FAF7F2\" }} />}\n        {retryLabel}\n      </button>\n      <style>{`\n        @media (prefers-reduced-motion: no-preference) {\n          .retry-spinner { animation: retry-react-spin .7s linear infinite; }\n          @keyframes retry-react-spin { to { transform: rotate(360deg); } }\n        }\n      `}</style>\n    </div>\n  );\n}"
}