Componentform0.76 KB gzipZero dependencies

LikeButton

Heart/thumb button that fills on click with burst particle animation and count increment.

Preview

Live Preview

LikeButton

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add like-button

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

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

<LikeButton onClick={handleLike} />

Usage guidance

Use LikeButton when a ticket stub surface needs Heart/thumb button that fills on click with burst particle animation and count increment. Keep props minimal and prefer composition with sibling stubs.

Avoid LikeButton for long form flows or dense data grids where a dedicated layout block fits better.

Source code

like-button.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

const likeBurstKeyframe = `
  @keyframes likeBurst {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0); }
  }
`;

const LikeButton: React.FC<{ onClick?: () => void; initiallyActive?: boolean }> = ({
  onClick,
  initiallyActive = false,
}) => {
  const [active, setActive] = React.useState(initiallyActive);

  const handleClick = () => {
    setActive(true);
    onClick?.();
    // Reset after animation
    const timeout = setTimeout(() => setActive(false), 300);
    return () => clearTimeout(timeout);
  };

  return (
    <div
      className={cn(
        "relative inline-flex items-center justify-center rounded-full border border-border p-2 hover:bg-accent/5 hover:text-accent-foreground transition-colors duration-200",
        active && "bg-accent text-accent-foreground"
      )}
    >
      <svg
        className={cn("w-5 h-5", active && "text-accent-strong")}
        viewBox="0 0 24 24"
        fill={active ? "currentColor" : "none"}
      >
        <path d="M12 21.35l-1.45-1.32c-0.53-0.48-1.28-.41-1.66.09s-.81 1.19.59 1.7l7.19 6.59L12 17.28l-6.66 5.48c-0.52 0.45-1.27.74-2.06.74-.78 0-1.54-.28-2.06-.74L2.16 7.76c-0.77-0.7-1.03-1.81-.55-2.5l7.19-6.59L12 5.24l-6.82 5.46c-0.78 0.63-1.06 1.74-.55 2.5s1.28 1.12 2.06.74l7.19-6.59L12 21.35z" />
      </svg>
    </div>
  );
};

export { LikeButton };

Props

Prop	Type	Description
onClick	() => void	Callback when button is clicked.