Confetti Button

A celebration button that fires a physics-based confetti burst from a lightweight canvas - mixed shapes, gravity, rotation, and fade-out, all in a self-contained component.

confetti-button-preview

Triggered 0 times

Why it helps: Success states (checkout complete, form submitted, goal reached) feel flat without a payoff moment. This adds delight without pulling in a confetti library.

Source

components/live/ConfettiButton.tsx

Usage

example.tsx

Props

className

string

Optional CSS class for root container

colors

string[]

Array of color hex values for confetti

particleCount

number

Number of particles per burst

buttonLabel

string

Text on the button

celebrationEmoji

string

Emoji shown before the label