BadtzUI
    Beta
    Docs
    Confetti button

    Confetti button

    A fun and interactive button that triggers a confetti explosion effect on click.

    Loading...

    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

    PropTypeDescriptionDefault
    classNameStringThe class name for the component, allowing for custom styling.-
    angleNumberThe angle at which the confetti is launched (in degrees).90
    particleCountNumberThe number of confetti particles to be launched.75
    startVelocityNumberThe initial velocity of the confetti particles.35
    spreadNumberThe spread angle of the confetti particles (in degrees).70
    childrenReact.ReactNodeThe content inside the button, typically text or icons.undefined
    onClickFunctionThe function to call when the button is clicked.-
    Star ButtonShuffle Button