Hold Button
Press and hold to confirm: a fill sweeps across the button with the label inverting at its edge, springs back if released early and draws a tick on completion.
Preview
- q3-forecast.xlsx
- board-deck-v4.key
- notes-draft.md
3 files selected
Deploy #41 · main@4f9a2c1
Press and hold with a pointer, or hold Space or Enter. Let go early to cancel.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onConfirm | () => void | — | Fires once when a hold completes. |
| duration | number | 1200 | Hold length in ms. Reduced motion uses 60% of it. |
| label / holdingLabel / confirmedLabel | ReactNode | "Hold to confirm" / label / "Done" | Text at rest, while held and after confirming. |
| icon | ReactNode | — | Leading icon; turns into a drawn tick on confirm. |
| variant | "primary" | "danger" | "primary" | Fill colour: the ink key or danger red. |
| size | "sm" | "md" | "lg" | "md" | 32, 36 or 44 px tall. |
| resetAfter | number | 1600 | Ms before returning to idle after confirming. 0 stays confirmed. |
| announce | { holding?, confirmed? } | — | Screen reader messages. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.