Edit Access Denied · 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=\"ad\" data-reason=\"{{reason}}\" style=\"--accent:{{accent}};\">\n  <div class=\"ad__icon\" aria-hidden=\"true\">\n    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\" fill=\"currentColor\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"/></svg>\n  </div>\n  <h3 class=\"ad__title\">Access denied</h3>\n  <p class=\"ad__lead\">You don't have permission to open <strong>{{resource}}</strong>.</p>\n  <p class=\"ad__reason ad__reason--role\">Your account role doesn't include access to {{resource}}.</p>\n  <p class=\"ad__reason ad__reason--trial\">{{resource}} needs an upgraded plan to open.</p>\n  <p class=\"ad__reason ad__reason--region\">{{resource}} isn't available in your region yet.</p>\n  {{#if showContact}}\n  <button class=\"ad__contact\" type=\"button\">{{contactLabel}}</button>\n  {{/if}}\n</div>\n<style>\n.ad { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 360px; box-sizing: border-box; padding: 24px; border-radius: 14px; border: 1.5px solid #24143020; text-align: center; }\n.ad__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, #FAF7F2); color: var(--accent); margin-bottom: 12px; }\n.ad__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }\n.ad__lead { margin: 0 0 10px; color: #241430cc; }\n.ad__reason { display: none; margin: 0 0 16px; font-size: 13px; color: #241430aa; }\n.ad[data-reason=\"role\"] .ad__reason--role { display: block; }\n.ad[data-reason=\"trial\"] .ad__reason--trial { display: block; }\n.ad[data-reason=\"region\"] .ad__reason--region { display: block; }\n.ad__contact { background: var(--accent); color: #FAF7F2; border: none; padding: 10px 20px; border-radius: 8px; font: 600 14px system-ui, sans-serif; cursor: pointer; }\n.ad__contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>",
  "tailwind": "<div data-reason=\"{{reason}}\" class=\"ad-tw font-sans text-sm leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[360px] box-border p-6 rounded-2xl border-[1.5px] border-[#24143020] text-center\" style=\"--accent:{{accent}};\">\n  <div aria-hidden=\"true\" class=\"inline-flex items-center justify-center w-[52px] h-[52px] rounded-full mb-3\" style=\"background:color-mix(in srgb, {{accent}} 16%, #FAF7F2); color:{{accent}};\">\n    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\" fill=\"currentColor\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"/></svg>\n  </div>\n  <h3 class=\"m-0 mb-2 text-lg font-bold\">Access denied</h3>\n  <p class=\"m-0 mb-2.5 text-[#241430]/80\">You don't have permission to open <strong>{{resource}}</strong>.</p>\n  <p class=\"ad-tw__reason ad-tw__reason--role m-0 mb-4 text-xs text-[#241430]/70\">Your account role doesn't include access to {{resource}}.</p>\n  <p class=\"ad-tw__reason ad-tw__reason--trial m-0 mb-4 text-xs text-[#241430]/70\">{{resource}} needs an upgraded plan to open.</p>\n  <p class=\"ad-tw__reason ad-tw__reason--region m-0 mb-4 text-xs text-[#241430]/70\">{{resource}} isn't available in your region yet.</p>\n  {{#if showContact}}\n  <button type=\"button\" class=\"text-[#FAF7F2] border-0 px-5 py-2.5 rounded-lg font-semibold text-sm cursor-pointer\" style=\"background:{{accent}};\">{{contactLabel}}</button>\n  {{/if}}\n</div>\n<style>\n.ad-tw__reason { display: none; }\n.ad-tw[data-reason=\"role\"] .ad-tw__reason--role { display: block; }\n.ad-tw[data-reason=\"trial\"] .ad-tw__reason--trial { display: block; }\n.ad-tw[data-reason=\"region\"] .ad-tw__reason--region { display: block; }\n</style>",
  "react": "export function AccessDenied({\n  resource = \"{{resource}}\",\n  reason = \"{{reason}}\",\n  showContact = {{showContact}},\n  contactLabel = \"{{contactLabel}}\",\n  accent = \"{{accent}}\",\n}) {\n  const reasonText = {\n    role: `Your account role doesn't include access to ${resource}.`,\n    trial: `${resource} needs an upgraded plan to open.`,\n    region: `${resource} isn't available in your region yet.`,\n  }[reason];\n  return (\n    <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 14, lineHeight: 1.5, color: \"#241430\",\n      background: \"#FAF7F2\", maxWidth: 360, boxSizing: \"border-box\", padding: 24, borderRadius: 14,\n      border: \"1.5px solid #24143020\", textAlign: \"center\" }}>\n      <div aria-hidden=\"true\" style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\",\n        width: 52, height: 52, borderRadius: \"50%\", background: `color-mix(in srgb, ${accent} 16%, #FAF7F2)`,\n        color: accent, marginBottom: 12 }}>\n        <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\" fill=\"currentColor\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\"/></svg>\n      </div>\n      <h3 style={{ margin: \"0 0 8px\", fontSize: 18, fontWeight: 700 }}>Access denied</h3>\n      <p style={{ margin: \"0 0 10px\", color: \"#241430cc\" }}>You don't have permission to open <strong>{resource}</strong>.</p>\n      <p style={{ margin: \"0 0 16px\", fontSize: 13, color: \"#241430aa\" }}>{reasonText}</p>\n      {showContact && (\n        <button type=\"button\" style={{ background: accent, color: \"#FAF7F2\", border: \"none\", padding: \"10px 20px\",\n          borderRadius: 8, fontWeight: 600, fontSize: 14, cursor: \"pointer\" }}>{contactLabel}</button>\n      )}\n    </div>\n  );\n}"
}