Permission Prompt
betaAsk for a capability when it is needed — what it allows and doesn't, the risk in words — and allow once, for the session, always, or not at all.
- AI
- 3 files
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add permission-promptnpm packages installed: class-variance-authority.
import { PermissionPrompt } from "@/components/ui/permission-prompt";Default
High Risk
Decided
Denied
Queue
<PermissionPrompt>
| Prop | Type | Default |
|---|---|---|
capability (required) | PermissionCapability | — |
onDecide (required) | (decision: PermissionDecision) => void | — |
requester (required)Who is asking: "Claude". | string | — |
announceAnnounce the prompt politely when it appears. Skipped when it takes focus or arrives decided. | boolean | true |
autoFocusMove focus to the prompt when it appears. Off by default: a prompt that takes focus can take a keypress meant for something else. Focus lands on the prompt itself, not on "Allow", so a stray Enter grants nothing. | boolean | false |
changeableOffer "Change" beside a result. | boolean | true |
decisionThe answer, to control the prompt. A decision shows the one-line result; | PermissionDecision | null | — |
labels | Partial<PermissionPromptLabels> | — |
optionsChoices to offer, in order. Defaults to once, session, always and deny — without "always" for high risk. Passing "always" here for a high-risk capability is how you opt in to offering it. | PermissionDecision[] | — |
reasonWhy it is needed now, written to follow the heading: "to find a free slot for the meeting you asked for". A string is shown as its own sentence. | ReactNode | — |
Plus every attribute of <section>.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes