Permission Menu

Install

pnpm dlx shadcn@latest add @vegastack/permission-menu

Usage

import { PermissionMenu } from "@/components/ui/permission-menu";

<PermissionMenu
  value={entry.level}
  options={LEVELS}
  onValueChange={(level) => setLevel(entry.id, level)}
  onRemove={() => removeAccess(entry.id)}
  aria-label={`${entry.name}'s access: ${label}`}
/>;

The last control on a sharing row. The trigger is a ghost button reading the current level and a chevron; the menu lists each level with a one-line muted description and a check on the current one. With onRemove, a separator and a destructive "Remove access" end the menu. A built-in row — the creator, an assignee, a manager — is readOnly: the level as plain muted text, no menu.

Scope

• Owns: the trigger, the level list with descriptions and the check, Remove access, the read-only text.
• Does not own: what a level means or saving it — onValueChange and onRemove are the host's.
• Compose with: PersonAvatar and PeopleInput in a share dialog (share-01).

Examples

Plain levels

Without descriptions the menu is a plain radio list; size="default" takes the 32px tier.

Read-only and disabled

readOnly for a built-in row; disabled while a change saves.

API Reference

PermissionMenuOption

Accessibility

• The trigger is a menu button. In a list of rows every trigger reads "Can edit", so give each an aria-label that names the row and keeps the visible level: "Priya's access: Can edit".
• Levels are radio items (menuitemradio, aria-checked), and each description is the item's accessible description rather than part of its name.
• Read-only text is not focusable.

Do / Don't