Permission

Specific allowed action/access.

html

<div class="perm">
  <code class="perm__name">can_delete_records: true</code>
  <button type="button" class="perm__btn" style="background:#241430;" >Delete record</button>
  
</div>
<style>
.perm { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.perm__name { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 14px; }
.perm__btn { border: none; padding: 10px 18px; border-radius: 8px; color: #FAF7F2; font: 600 13px system-ui, sans-serif; cursor: pointer; width: 100%; }
.perm__btn:disabled { opacity: .35; cursor: not-allowed; }
.perm__note { margin: 8px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <code class="block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-3.5">can_delete_records: true</code>
  <button type="button" class="border-none py-2.5 px-4.5 rounded-lg text-[#FAF7F2] font-semibold text-[13px] cursor-pointer w-full disabled:opacity-35 disabled:cursor-not-allowed" style="background:#241430;" >Delete record</button>
  
</div>

react

export function Permission({
  permissionName = "can_delete_records",
  actionLabel = "Delete record",
  granted = true,
  accent = "#241430",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, background: "#24143012", padding: "8px 10px", borderRadius: 6, marginBottom: 14 }}>{permissionName}: {String(granted)}</code>
      <button type="button" disabled={!granted}
        style={{ border: "none", padding: "10px 18px", borderRadius: 8, color: "#FAF7F2", fontWeight: 600, fontSize: 13, cursor: granted ? "pointer" : "not-allowed", width: "100%", background: accent, opacity: granted ? 1 : .35 }}>{actionLabel}</button>
      {!granted && <p style={{ margin: "8px 0 0", fontSize: 10, color: "#24143099" }}>Blocked &mdash; this user lacks {permissionName}.</p>}
    </div>
  );
}