Components
Heart button
A like button with a jelly pop: the heart fills, throws a ring and a spray of coloured sparks, and the counter rolls up to its next number (and back down if you change your mind).
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { HeartButton } from '@vizzele/react';
<HeartButton
count={127} // likes from everyone else
liked={liked}
onLikedChange={setLiked}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
liked / defaultLiked / onLikedChange | boolean | — | Controlled or not. |
count | number | — | Likes from everyone else; yours is added on top. Omit to hide. |
label | string | 'Like' | Accessible name. |
Accessibility
- A toggle button with aria-pressed, named by the label and the count ("Like, 128").
- The burst only plays after a press — never on page load — and not at all with reduced motion.