Access Denied

UI indicating insufficient permission.

html

<div class="ad" data-reason="role" style="--accent:#C0392B;">
  <div class="ad__icon" aria-hidden="true">
    <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>
  </div>
  <h3 class="ad__title">Access denied</h3>
  <p class="ad__lead">You don't have permission to open <strong>Billing settings</strong>.</p>
  <p class="ad__reason ad__reason--role">Your account role doesn't include access to Billing settings.</p>
  <p class="ad__reason ad__reason--trial">Billing settings needs an upgraded plan to open.</p>
  <p class="ad__reason ad__reason--region">Billing settings isn't available in your region yet.</p>
  
  <button class="ad__contact" type="button">Contact your administrator</button>
  
</div>
<style>
.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; }
.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; }
.ad__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.ad__lead { margin: 0 0 10px; color: #241430cc; }
.ad__reason { display: none; margin: 0 0 16px; font-size: 13px; color: #241430aa; }
.ad[data-reason="role"] .ad__reason--role { display: block; }
.ad[data-reason="trial"] .ad__reason--trial { display: block; }
.ad[data-reason="region"] .ad__reason--region { display: block; }
.ad__contact { background: var(--accent); color: #FAF7F2; border: none; padding: 10px 20px; border-radius: 8px; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.ad__contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div data-reason="role" 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:#C0392B;">
  <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, #C0392B 16%, #FAF7F2); color:#C0392B;">
    <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>
  </div>
  <h3 class="m-0 mb-2 text-lg font-bold">Access denied</h3>
  <p class="m-0 mb-2.5 text-[#241430]/80">You don't have permission to open <strong>Billing settings</strong>.</p>
  <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 Billing settings.</p>
  <p class="ad-tw__reason ad-tw__reason--trial m-0 mb-4 text-xs text-[#241430]/70">Billing settings needs an upgraded plan to open.</p>
  <p class="ad-tw__reason ad-tw__reason--region m-0 mb-4 text-xs text-[#241430]/70">Billing settings isn't available in your region yet.</p>
  
  <button type="button" class="text-[#FAF7F2] border-0 px-5 py-2.5 rounded-lg font-semibold text-sm cursor-pointer" style="background:#C0392B;">Contact your administrator</button>
  
</div>
<style>
.ad-tw__reason { display: none; }
.ad-tw[data-reason="role"] .ad-tw__reason--role { display: block; }
.ad-tw[data-reason="trial"] .ad-tw__reason--trial { display: block; }
.ad-tw[data-reason="region"] .ad-tw__reason--region { display: block; }
</style>

react

export function AccessDenied({
  resource = "Billing settings",
  reason = "role",
  showContact = true,
  contactLabel = "Contact your administrator",
  accent = "#C0392B",
}) {
  const reasonText = {
    role: `Your account role doesn't include access to ${resource}.`,
    trial: `${resource} needs an upgraded plan to open.`,
    region: `${resource} isn't available in your region yet.`,
  }[reason];
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", maxWidth: 360, boxSizing: "border-box", padding: 24, borderRadius: 14,
      border: "1.5px solid #24143020", textAlign: "center" }}>
      <div aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 52, height: 52, borderRadius: "50%", background: `color-mix(in srgb, ${accent} 16%, #FAF7F2)`,
        color: accent, marginBottom: 12 }}>
        <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>
      </div>
      <h3 style={{ margin: "0 0 8px", fontSize: 18, fontWeight: 700 }}>Access denied</h3>
      <p style={{ margin: "0 0 10px", color: "#241430cc" }}>You don't have permission to open <strong>{resource}</strong>.</p>
      <p style={{ margin: "0 0 16px", fontSize: 13, color: "#241430aa" }}>{reasonText}</p>
      {showContact && (
        <button type="button" style={{ background: accent, color: "#FAF7F2", border: "none", padding: "10px 20px",
          borderRadius: 8, fontWeight: 600, fontSize: 14, cursor: "pointer" }}>{contactLabel}</button>
      )}
    </div>
  );
}