Like buttonPro

• Likes, favorites and reactions on posts, comments and products.

• Settings: use a switch.

Import it from @/components/ui/like-button after installing.

import { LikeButton } from "@/components/ui/like-button";

export function PostActions({ post }: { post: Post }) {
  return <LikeButton count={post.likes} defaultLiked={post.likedByMe} onLikedChange={(liked) => setLike(post.id, liked)} label="Like this post" />;
}

• A button with aria-pressed, named with what is liked and the count.
• Color is backed by a filled heart.

• The heart springs in from 20%; a ring and ten particles burst outward (600ms).
• The count rolls up or down.
• No burst under reduced motion.

• Inline; three sizes for dense lists and hero actions.

• Particles exist only during the burst.

• When controlled, pass the already-updated count yourself.