Elastic button
Squishy button: leans and stretches toward the pointer on hover, squashes on press, wobbles back on an underdamped spring with a jelly ripple; lit-key and secondary variants in three sizes; plain press under reduced motion.
Preview
Sizes and variants: hover, press, let go
With an icon and a count
Held states: rest, half pressed, fully squashed
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "primary" | Lit key, or the raised card-coloured pebble. |
| size | "sm" | "md" | "lg" | "md" | 32, 40 or 48 px tall. |
| squash | number (0–1) | — | Hold a squash amount, e.g. for a held preview. |
| ...props | button props | — | onClick, disabled and the rest pass to the native button. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.