Pro
Like button
A like, star or save that answers at once. The icon fills with one small pop and a ring, the count rolls one step up or down from where it was, and it stays a real toggle with its count in its name.
pnpm dlx shadcn@latest add @caliper/like-buttonWhen to use
Use it for
- Posts, comments, templates and repositories that people favourite or save.
- Counts that change by one at a time from the reader's own press.
Skip it when
- Up and down votes; use the vote control.
- Emoji reactions with several choices; use the reaction bar.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Pops only on press
- The pop and ring play when the reader presses, never on the first paint or when the count changes from elsewhere.
- Short counts
- Counts are compact (2.4K), and the button's name carries the exact number.
Installation
pnpm dlx shadcn@latest add @caliper/like-button
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { LikeButton } from "@/components/ui/like-button"
The worked example comes with Pro
The 28-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
LikeButton
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-pressed, aria-label and aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Reaction barEmoji reactions under a message or post. Each chip is a toggle; the count rolls and your chip settles with one small pop. The picker adds a new reaction.
- Vote controlUp and down votes with a rolling score. Choosing the same arrow again clears your vote; the owner saves it optimistically and can revert.
- Toggle and toggle groupA button that stays pressed, alone or in a raised group that holds one choice or many and moves with the arrow keys as a single tab stop.