Action FAB
A floating lit-key button that expands into a vertical or radial speed dial of labelled actions with stagger, a plus that turns into an ×, and full menu keyboard support.
Preview
Workspace
4 items
- Launch checklist12 of 18 done
- Q4 roadmapEdited 3 min ago
- Hiring planShared with Priya
- Churn notesDraft
Pebble notes
Tap + to capture
- Launch checklist12 of 18 done
- Q4 roadmapEdited 3 min ago
- Hiring planShared with Priya
- Churn notesDraft
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | FabAction[] | — | { id, label, icon, onSelect?, hint?, disabled? }. Nearest to the button first. Required. |
| label | string | "Actions" | Accessible name of the button and the menu. |
| layout | "vertical" | "radial" | "vertical" | Labelled stack upward, or icon keys on a quarter arc. |
| side | "left" | "right" | "left" | Which side labels sit (vertical) or the arc opens toward (radial). |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / false / — | Menu state. |
| scrim | boolean | true | Dim the nearest positioned ancestor while open. |
| className | string | — | Position the FAB here, e.g. fixed bottom-6 right-6. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.