"use client"; /** * @author: @dorianbaffier * @description: Particle Button * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { MousePointerClick } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { type RefObject, useRef, useState } from "react"; import type { ButtonProps } from "@/components/ui/button"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface ParticleButtonProps extends ButtonProps { onSuccess?: () => void; successDuration?: number; } function SuccessParticles({ buttonRef, }: { buttonRef: React.RefObject; }) { const rect = buttonRef.current?.getBoundingClientRect(); if (!rect) return null; const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; return ( {[...Array(6)].map((_, i) => ( ))} ); } export default function ParticleButton({ children, onClick, onSuccess, successDuration = 1000, className, ...props }: ParticleButtonProps) { const [showParticles, setShowParticles] = useState(false); const buttonRef = useRef(null); const handleClick = async (e: React.MouseEvent) => { setShowParticles(true); setTimeout(() => { setShowParticles(false); }, successDuration); }; return ( <> {showParticles && ( } /> )} ); }

Particle Button

Instalação

Dependências

Registry dependencies