Action Sheet
A mobile bottom action sheet with grouped actions, icons, a destructive item and a separate cancel, dragged or flicked away, plus a static panel for previews.
Preview
Notes
Launch checklistEdited 2h ago
Q4 roadmapEdited 3h ago
Churn notesEdited 4h ago
Hiring planEdited 5h ago
Tap ⋯ on the first note
Notes
Launch checklistEdited 2h ago
Q4 roadmapEdited 3h ago
Churn notesEdited 4h ago
Hiring planEdited 5h ago
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | SheetActionGroup[] | — | { id, actions: { id, label, icon?, onSelect?, destructive?, disabled? }[] }. Required. |
| title / message | ReactNode | — | Header text; names and describes the sheet. |
| cancelLabel | string | "Cancel" | The separate cancel card. |
| onAction | (action) => void | — | Called with the chosen action after its onSelect. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Sheet state; pass a trigger as children. |
| container | HTMLElement | null | viewport | Render inside an element, e.g. a framed phone. |
| ActionSheetPanel | { title?, message?, groups, cancelLabel? } | — | A static, inert picture of the open sheet for docs and previews. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.