RBAC

Role-Based Access Control.

html

<div class="rbac rbac--editor">
  <p class="rbac__assign"><strong>Alice</strong> is assigned role <span class="rbac__role" style="background:#BFD9F2;">editor</span></p>
  
  <p class="rbac__desc rbac__desc--viewer">Viewer role grants: read-only access</p>
  <p class="rbac__desc rbac__desc--editor">Editor role grants: read + write access</p>
  <p class="rbac__desc rbac__desc--admin">Admin role grants: read + write + manage users</p>
  
  <ul class="rbac__perms">
    <li class="rbac__perm rbac__perm--view"><span class="rbac__on">&#10003; View content</span><span class="rbac__off">&#10005; View content (not granted)</span></li>
    <li class="rbac__perm rbac__perm--edit"><span class="rbac__on">&#10003; Edit content</span><span class="rbac__off">&#10005; Edit content (not granted)</span></li>
    <li class="rbac__perm rbac__perm--manage"><span class="rbac__on">&#10003; Manage users</span><span class="rbac__off">&#10005; Manage users (not granted)</span></li>
  </ul>
</div>
<style>
.rbac { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.rbac__assign { margin: 0 0 8px; }
.rbac__role { font-size: 10px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.rbac__desc { display: none; margin: 0 0 10px; font-size: 11px; color: #24143099; }
.rbac--viewer .rbac__desc--viewer, .rbac--editor .rbac__desc--editor, .rbac--admin .rbac__desc--admin { display: block; }
.rbac__perms { list-style: none; margin: 0; padding: 0; }
.rbac__perm { padding: 4px 0; font-size: 12px; }
.rbac__on { display: none; }
.rbac__off { color: #24143099; }
.rbac--viewer .rbac__perm--view .rbac__on, .rbac--editor .rbac__perm--view .rbac__on, .rbac--editor .rbac__perm--edit .rbac__on, .rbac--admin .rbac__perm .rbac__on { display: inline; }
.rbac--viewer .rbac__perm--view .rbac__off, .rbac--editor .rbac__perm--view .rbac__off, .rbac--editor .rbac__perm--edit .rbac__off, .rbac--admin .rbac__perm .rbac__off { display: none; }
</style>

tailwind

<div class="rbactw rbactw--editor font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2"><strong>Alice</strong> is assigned role <span class="text-[10px] uppercase py-0.5 px-2 rounded-full font-bold" style="background:#BFD9F2;">editor</span></p>
  
  <p class="rbactw__desc rbactw__desc--viewer hidden m-0 mb-2.5 text-[11px] text-[#24143099]">Viewer role grants: read-only access</p>
  <p class="rbactw__desc rbactw__desc--editor hidden m-0 mb-2.5 text-[11px] text-[#24143099]">Editor role grants: read + write access</p>
  <p class="rbactw__desc rbactw__desc--admin hidden m-0 mb-2.5 text-[11px] text-[#24143099]">Admin role grants: read + write + manage users</p>
  
  <ul class="list-none m-0 p-0">
    <li class="rbactw__perm rbactw__perm--view py-1 text-xs"><span class="rbactw__on hidden">&#10003; View content</span><span class="rbactw__off text-[#24143099]">&#10005; View content (not granted)</span></li>
    <li class="rbactw__perm rbactw__perm--edit py-1 text-xs"><span class="rbactw__on hidden">&#10003; Edit content</span><span class="rbactw__off text-[#24143099]">&#10005; Edit content (not granted)</span></li>
    <li class="rbactw__perm rbactw__perm--manage py-1 text-xs"><span class="rbactw__on hidden">&#10003; Manage users</span><span class="rbactw__off text-[#24143099]">&#10005; Manage users (not granted)</span></li>
  </ul>
</div>
<style>
.rbactw--viewer .rbactw__desc--viewer, .rbactw--editor .rbactw__desc--editor, .rbactw--admin .rbactw__desc--admin { display: block; }
.rbactw--viewer .rbactw__perm--view .rbactw__on, .rbactw--editor .rbactw__perm--view .rbactw__on, .rbactw--editor .rbactw__perm--edit .rbactw__on, .rbactw--admin .rbactw__perm .rbactw__on { display: inline; }
.rbactw--viewer .rbactw__perm--view .rbactw__off, .rbactw--editor .rbactw__perm--view .rbactw__off, .rbactw--editor .rbactw__perm--edit .rbactw__off, .rbactw--admin .rbactw__perm .rbactw__off { display: none; }
</style>

react

export function Rbac({
  userName = "Alice",
  role = "editor",
  accent = "#BFD9F2",
  showRoleDesc = true,
}) {
  const desc = {
    viewer: "Viewer role grants: read-only access",
    editor: "Editor role grants: read + write access",
    admin: "Admin role grants: read + write + manage users",
  }[role];
  const active = { view: role === "viewer" || role === "editor" || role === "admin", edit: role === "editor" || role === "admin", manage: role === "admin" };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 8px" }}><strong>{userName}</strong> is assigned role <span style={{ fontSize: 10, textTransform: "uppercase", padding: "2px 8px", borderRadius: 999, fontWeight: 700, background: accent }}>{role}</span></p>
      {showRoleDesc && <p style={{ margin: "0 0 10px", fontSize: 11, color: "#24143099" }}>{desc}</p>}
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        <li style={{ padding: "4px 0", fontSize: 12 }}>{active.view ? "✓ View content" : <span style={{ color: "#24143099" }}>&#10005; View content (not granted)</span>}</li>
        <li style={{ padding: "4px 0", fontSize: 12 }}>{active.edit ? "✓ Edit content" : <span style={{ color: "#24143099" }}>&#10005; Edit content (not granted)</span>}</li>
        <li style={{ padding: "4px 0", fontSize: 12 }}>{active.manage ? "✓ Manage users" : <span style={{ color: "#24143099" }}>&#10005; Manage users (not granted)</span>}</li>
      </ul>
    </div>
  );
}