Edit Role

Name

Also known as (comma separated)

Brief definition Named collection of permissions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "roleName", "type": "text", "label": "Role name", "default": "Content Editor" }, { "id": "canPublish", "type": "toggle", "label": "Bundle in: publish", "default": true }, { "id": "canDelete", "type": "toggle", "label": "Bundle in: delete", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rolec\">\n <p class=\"rolec__name\">Role: <strong>{{roleName}}</strong></p>\n <div class=\"rolec__chips\">\n <span class=\"rolec__chip\" style=\"background:{{accent}};\">view</span>\n <span class=\"rolec__chip\" style=\"background:{{accent}};\">edit</span>\n {{#if canPublish}}<span class=\"rolec__chip\" style=\"background:{{accent}};\">publish</span>{{/if}}\n {{#if canDelete}}<span class=\"rolec__chip\" style=\"background:{{accent}};\">delete</span>{{/if}}\n </div>\n <p class=\"rolec__hint\">A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>\n</div>\n<style>\n.rolec { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.rolec__name { margin: 0 0 12px; }\n.rolec__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }\n.rolec__chip { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: #241430; }\n.rolec__hint { margin: 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3\">Role: <strong>{{roleName}}</strong></p>\n <div class=\"flex gap-1.5 flex-wrap mb-3\">\n <span class=\"text-[11px] font-bold py-1.5 px-2.5 rounded-full\" style=\"background:{{accent}};\">view</span>\n <span class=\"text-[11px] font-bold py-1.5 px-2.5 rounded-full\" style=\"background:{{accent}};\">edit</span>\n {{#if canPublish}}<span class=\"text-[11px] font-bold py-1.5 px-2.5 rounded-full\" style=\"background:{{accent}};\">publish</span>{{/if}}\n {{#if canDelete}}<span class=\"text-[11px] font-bold py-1.5 px-2.5 rounded-full\" style=\"background:{{accent}};\">delete</span>{{/if}}\n </div>\n <p class=\"m-0 text-[10px] text-[#24143099]\">A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>\n</div>", "react": "export function Role({\n roleName = \"{{roleName}}\",\n canPublish = {{canPublish}},\n canDelete = {{canDelete}},\n accent = \"{{accent}}\",\n}) {\n const chip = { fontSize: 11, fontWeight: 700, padding: \"5px 11px\", borderRadius: 999, color: \"#241430\", background: accent };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\" }}>Role: <strong>{roleName}</strong></p>\n <div style={{ display: \"flex\", gap: 6, flexWrap: \"wrap\", marginBottom: 12 }}>\n <span style={chip}>view</span>\n <span style={chip}>edit</span>\n {canPublish && <span style={chip}>publish</span>}\n {canDelete && <span style={chip}>delete</span>}\n </div>\n <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>A role is just a named bundle of permissions &mdash; assign the role, and every permission in it comes along.</p>\n </div>\n );\n}" }