ConfettiButton is a calm, ringed dark button with a small sparkle icon. Click it and it presses in, the sparkle lights up, and a short burst of soft, muted confetti falls from the button — a tiny celebration that still looks professional.
Preview
Props
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/confetti-buttonUsage
import { ConfettiButton } from "@/components/evil-buttons/confetti-button";
export function ButtonDemo() {
return (
<ConfettiButton
colors={["#fafafa", "#a3a3a3", "#93c5fd"]}
onCelebrate={() => console.log("Celebrated!")}
>
Celebrate
</ConfettiButton>
);
}Props
The component spreads native button props. onClick still fires before the burst; call event.preventDefault() to skip it.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button label. Falls back to label. |
label | React.ReactNode | "Continue" | Label used when no children are provided. |
particleCount | number | 80 | Confetti particles per burst. |
spread | number | 64 | Confetti spread in degrees. |
startVelocity | number | 32 | Launch velocity of the burst. |
colors | string[] | muted neutrals + soft accents | Custom confetti colors. |
icon | boolean | true | Show the leading sparkle icon. |
onCelebrate | () => void | - | Fired after each confetti burst. |
className | string | - | Extra classes merged onto the button. |
Notes
- Shares the graded dark surface, hairline ring, and spring press used by MinimalButton and CommandButton.
- Each click fires one small burst of flat squares and dots from the button via
canvas-confetti, and the sparkle icon flares briefly. - Confetti is skipped automatically when the user prefers reduced motion.
Registry
The registry item includes components/evil-buttons/confetti-button.tsx, and adds canvas-confetti, clsx, and tailwind-merge as dependencies.