Confetti Button
betaA Button that bursts confetti from itself when pressed — and burstConfetti(), to celebrate from anywhere: a point, an element, a finished upload.
- Effects & motion
- 2 files
- No extra npm packages
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add confetti-buttonNo npm packages are needed beyond what Dowel already requires.
import { ConfettiButton } from "@/components/ui/confetti-button";Default
Custom
From An Element
<ConfettiButton>
| Prop | Type | Default |
|---|---|---|
confettiHow the burst looks: count, speed, spread, angle and colours. | ConfettiOptions | — |
The button is a Button: same role, name, focus and keyboard activation. The burst is decoration on a temporary canvas that is aria-hidden, ignores the pointer and removes itself when the last piece falls. Under reduced motion there is no burst at all, so never let it be the only sign that something succeeded — say it in words too, with a toast or a message.
6/6
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — does not apply
- Visible focus — does not apply
- No fixed widths — passes