Ripple Button
A Pebble button with pointer-origin ink that spreads while held and fades on release, clipped to its radius, centred for keyboard presses and coloured from tokens.
Preview
Weekly digest
Goes to 1,284 subscribers on Monday 09:00.
Press and hold anywhere on a button; Enter or Space ripples from the centre.
Ink and states
Surface ink · held
Ember ink · held
Pill · large
Icon · ghost
Disabled
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "ghost" | "primary" | Surface: the lit key, a raised card or flat. |
| size | "sm" | "md" | "lg" | "icon" | "md" | Height and padding; icon is a 36 px square. |
| ink | "auto" | "accent" | "auto" | Ripple colour: the surface's own ink, or ember. |
| shape | "rounded" | "pill" | "rounded" | Corner style. The ripple clips to it. |
| heldRipple | { x: number; y: number } | — | Show a frozen held ripple at a point, for static mocks. |
| asChild | boolean | false | Render a link or other element as the button (no ink layer). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.