Depth Button
A big round or pill 3D push button with a side wall, pressed travel, rim light and an optional hold-to-arm ring.
Preview
Press · 0 starts
Hold 1.2 s to arm
Pill · paper
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "circle" | "pill" | "circle" | Round (icon) or pill (label) button. |
| tone | "ember" | "ink" | "paper" | "ember" | Cap colour, from tokens. |
| size | number | 96 | Diameter (circle) or height (pill) in px. |
| depth | number | 10 | Height of the cap's side wall in px. |
| holdToArm | number | — | Seconds the button must be held to arm. Omit for an ordinary press. |
| onActivate | () => void | — | Called on a press, or when a hold to arm completes. |
| armed | boolean | — | Armed state (controlled). |
| onArmedChange | (armed: boolean) => void | — | Called when the button arms or disarms. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.