IM
Ines Moreau
Design systems · 2h ago
We cut our token set from 214 to 61 values and nobody noticed, except the bundle. Notes on what we merged and what we kept.
Score
46Vote Button
Reaction controls: a heart like with a spark burst and rolling count, an up/down vote with score, a bookmark toggle and a share menu with copy-link feedback.
Preview
Score
Priya Shah
Debounce the resize observer, then read layout once per frame. The jank came from measuring inside the scroll handler.
Score
Tomás Rey
A CSS-only fallback works if you can live without the sticky header shadow.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| liked / defaultLiked / onLikedChange | boolean / boolean / (liked) => void | — / false / — | LikeButton state. |
| count | number | — | LikeButton. Likes from others; the viewer's like is added. Omit for icon-only. |
| value / defaultValue / onValueChange | -1 | 0 | 1 | — / 0 / — | VoteControl state. Pressing the active arrow clears it. |
| score | number | — | VoteControl. Score from others; the viewer's vote is added. Required. |
| orientation | "horizontal" | "vertical" | "horizontal" | VoteControl layout. |
| itemLabel | string | — | VoteControl. Appended to labels, e.g. "Upvote answer by Priya". |
| saved / defaultSaved / onSavedChange | boolean / boolean / (saved) => void | — / false / — | BookmarkButton state. |
| url / title / targets | string / string / ShareTarget[] | — / "" / Email, Message | ShareButton. Targets are { label, icon?, href(url, title) }. |
| showLabel | boolean | false | BookmarkButton / ShareButton. Text next to the icon. |
| size | "sm" | "md" | "md" | All parts. 28 or 32 px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.