# Confetti Button

> A celebratory burst of brand-coloured confetti that flies up, flutters as it falls and fades, for sign-ups, purchases and wins.

Category: Buttons · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/confetti-button

## When to use it

Completing a purchase, finishing onboarding, claiming a reward, reaching a milestone: moments worth celebrating.

## How it works

A click creates a full-window canvas, only for as long as the confetti lasts, and fires pieces from the button's centre in an upward cone. Each frame applies air resistance, gravity and a sideways flutter; squashing each piece along one axis as it spins makes flat paper look like it's turning in the air. Pieces fade as they fall, and when the last one has gone, the canvas removes itself. Quick clicks add to the same burst.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/confetti-button` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `string[]` |  | Confetti colours, picked at random. |
| `pieces` | `number` | `90` | Pieces per burst. |
| `...props` | `ButtonHTMLAttributes` |  | Anything a <button> accepts. Call preventDefault in onClick to skip the burst. |

## Accessibility

- **Keyboard: Pass.** A native <button>; keyboard presses fire the confetti too.
- **Screen readers: Pass.** Announced with its label; the canvas only exists during the burst and is hidden from assistive tech.
- **Reduced motion: Pass.** With reduced motion on, no confetti is fired; your onClick still runs.
- **Colour contrast: Pass.** White text measures 4.9:1 at rest and 6.6:1 on hover.