Components | omverse-ui

Overview

Use PermissionMatrix when administrators must compare and edit the same capabilities across multiple governed resources.

Workspace role

Live preview

Permissions by resource
Resource	Read	Edit	Delete
ProjectsPortfolio records	Read for Projects (inherited)Inherited	Edit for Projects	Delete for Projects
BillingInvoices and plans	Read for Billing	Edit for Billing	—

RolePermissions.tsx

tsx

1import { PermissionMatrix } from 'omverse-ui'
2 
3const permissions = [
4  { id: 'read', label: 'Read' },
5  { id: 'edit', label: 'Edit' },
6]
7 
8const resources = [
9  { id: 'projects', label: 'Projects' },
10  { id: 'billing', label: 'Billing', unavailable: ['edit'] },
11]
12 
13<PermissionMatrix permissions={permissions} resources={resources} defaultValue={{ projects: ['read'] }} />

Anatomy

A semantic matrix relates resource rows to capability columns and distinguishes direct, inherited, and unavailable cells.

ResourceViewEditDelete

Projects✓□□

Billing✓□—

1
Resource header
Names the row dimension.
2
Capability headers
Names permission columns.
3
Resource identity
Labels each governed object.
4
Grant cell
Shows and changes access.
5
Unavailable cell
Explains an invalid pairing.

When to use

PermissionMatrix is best when role and policy decisions need direct side-by-side comparison.

When not to use

Avoid this component for single booleans or conversational history.

Avoid

Do not use for one-off permission
Use Checkbox for isolated toggles.
Do not hide policy origin
Keep inherited state visible.
Do not replace event history
Use AuditLog for evidence timelines.

Variants

Outlined

Default bordered grid.

Filled

Tonal policy surface.

Raised

Independent floating block.

Density

Three row heights.

States

Track direct grants, inherited access, unavailable pairs, and read-only mode states.

State	Trigger	Visual response	Interaction
Granted	Direct grant	Checked	Can revoke
Not granted	No grant	Unchecked	Can grant
Inherited	Parent policy	Checked and labeled	Cannot edit here
Unavailable	Invalid pairing	Dash	No control
Read-only	Review mode	Resolved grants	No changes

Behavior

Direct grants

Controlled value stores editable grants.

Inheritance

Resource metadata resolves policy.

Bulk rows

Toggle all editable permissions in one resource.

Bulk columns

Toggle one permission across resources.

Accessibility

Key	Action
`Tab`	Moves through editable grants and bulk controls.
`Space`	Toggles the focused checkbox.
`Enter`	Activates bulk operations.

Use table, caption, row headers, and column headers.
Name every checkbox by capability and resource.
State inherited status in text.
Represent unavailable pairs without hidden controls.

Content guidelines

Use concise governance language that maps to policy and product structure.

Use capability verbs

Name the allowed operation.

ExampleRead, Edit, Delete

Use resource nouns

Use product objects consistently.

ExampleProjects, Billing

Name policy origin

Explain inherited grants.

ExampleInherited from Workspace admin

Examples

Use inherited grants to show which permissions are inherited versus directly assigned.

Read-only inherited grant

Live preview

☑ View projects Inherited from Workspace admin

Props / API

PermissionMatrix extends div attributes.

Props

PropTypeDefaultDescription

permissionsreadonly PermissionMatrixPermission[]requiredCapability columns.

resourcesreadonly PermissionMatrixResource[]requiredResource rows and constraints.

valuePermissionMatrixValueundefinedControlled direct grants.

defaultValuePermissionMatrixValue{}Initial direct grants.

onValueChange(value) => voidundefinedRuns after grant changes.

captionReactNode'Permissions by resource'Accessible table caption.

readOnlybooleanfalsePrevents grant changes.

loadingbooleanfalseShows loading status.

showBulkControlsbooleantrueShows row and column toggles.

variant'outlined' | 'filled' | 'raised''outlined'Surface treatment.

size'sm' | 'md' | 'lg''md'Cell density.

PermissionMatrix

Recommended