Installation

Install dependencies

npm install

npm install clsx tailwind-merge canvas-confetti

Add utils file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

confetti-button.tsx

"use client";
 
import React, { useRef, MouseEventHandler, ReactNode } from "react";
import { cn } from "@/lib/utils";
import confetti from "canvas-confetti";
 
interface ConfettiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
  children: ReactNode;
  angle?: number;
  particleCount?: number;
  startVelocity?: number;
  spread?: number;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}
 
export default function ConfettiButton({
  className,
  children,
  angle = 90,
  particleCount = 75,
  startVelocity = 35,
  spread = 70,
  onClick,
  ...props
}: ConfettiButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null);
 
  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      confetti({
        particleCount,
        startVelocity,
        angle,
        spread,
        origin: {
          x: (rect.left + rect.width / 2) / window.innerWidth,
          y: (rect.top + rect.height / 2) / window.innerHeight,
        },
      });
    }
    if (onClick) {
      onClick(event);
    }
  };
 
  return (
    <button
      ref={buttonRef}
      onClick={handleClick}
      className={cn(
        "bg-neutral-100 text-black dark:bg-neutral-900 dark:text-white h-10 px-4 py-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Props

Prop	Type	Description	Default
className	String	The class name for the component, allowing for custom styling.	-
angle	Number	The angle at which the confetti is launched (in degrees).	90
particleCount	Number	The number of confetti particles to be launched.	75
startVelocity	Number	The initial velocity of the confetti particles.	35
spread	Number	The spread angle of the confetti particles (in degrees).	70
children	React.ReactNode	The content inside the button, typically text or icons.	undefined
onClick	Function	The function to call when the button is clicked.	-