Permission Prompt
A soft ask before a browser permission with a drawn glyph, reasons, Allow (calling the real API on click only) and Not now, a remembered outcome and re-enable steps when blocked, as an inline card or anchored popover.
Preview
Ask
Get notified when it matters?
- Replies and mentions, as they happen
- A heads-up before a deadline
- Nothing promotional, ever
Granted
You're all set
Location is on. Results are sorted by distance.
Blocked
Camera is blocked
Your browser is blocking it for this site. To turn it back on:
- 1Click the lock or settings icon next to the address
- 2Open Site settings
- 3Set it to Allow, then reload
Anchored popover
Inbox
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "notifications" | "camera" | "microphone" | "location" | — | Picks the glyph, copy and browser API. Required. |
| title / reasons | ReactNode / string[] | per kind | Why you're asking. |
| status / defaultStatus / onStatusChange | "ask" | "pending" | "granted" | "denied" | "dismissed" | — / "ask" / — | Controlled or uncontrolled state. |
| request | () => Promise<"granted" | "denied"> | built-in | Replace the real browser request. Only ever called from Allow. |
| storageKey | string | — | Remember the outcome in localStorage. |
| blockedSteps | string[] | generic | How to re-enable, shown when blocked. |
| allowLabel / dismissLabel | string | "Allow" / "Not now" | Button text. |
| hideWhenDismissed | boolean | false | Remove the card after Not now. |
| onRetry | () => void | — | Shows “I've changed it, check again” when blocked. |
| PermissionPopover: children / side / align / open / defaultOpen / autoFocus | ReactNode / placement / boolean | — / "bottom" / "end" / — / false / true | Anchor the ask to the control that needs it. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.