A heart button that fills with a rolling liquid wave, pulses two rings and rolls its count to the new value.
Burnt honey tart
Pastry / 45 min
npx shadcn@latest add https://hyperblur.dev/r/like-heart-fill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-heart-fill.tsx.
import { LikeHeartFill } from "@/components/hyperblur/like-heart-fill"
<LikeHeartFill count={1284} onLikeChange={(liked, count) => console.log(liked, count)} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 0 | Total count at the initial liked state. Liking adds one to it, unliking takes it back. |
| liked | boolean | Controlled liked state. Pair with onLikeChange. | |
| defaultLiked | boolean | false | Initial liked state when uncontrolled. |
| onLikeChange | (liked: boolean, count: number) => void | Called on every toggle with the new liked state and the new count. | |
| color | string | "#ff4d6d" | Liquid, outline and ring color. |
| size | number | 28 | Heart size in pixels. The button and count scale with it. |
| label | string | "Like" | Accessible name of the toggle button. |