Confetti
A short burst of confetti from an element, for a genuine finish such as completing onboarding.
import { Confetti } from "@butteryui/react";Demo
Bursts from the middle of the button
When to use it
Use it for
- The last step of onboarding
- A first big success, once: the first export, the first published deck
Not for
- Routine actions such as saving, deleting or copying
- Anything that happens more than once per user, or on page load
Examples
Finish button
The last onboarding step's button, which celebrates once the tour is done.
First export
A deck's export panel that celebrates the first export and none after it, saying each one in text.
Not exported yet
Variants and states
A finish
28 to 40 pieces in the palette's colors, thrown up in a ±60° cone and gone in 900ms.
Turn on reduced motion and the burst doesn't happen.
Props
Also exported
| Export | Description |
|---|---|
celebrate(from?: Element | null): void | Bursts confetti from the middle of from (the viewport's middle without it): 28–40 small pieces in the
palette's fresh colors, thrown up in a ±60° cone, slowed by the air and fluttering down for 900ms. Save it
for a genuine finish, such as the last onboarding step or a first export, never routine actions. Does
nothing with reduced motion, and nothing (with a development warning) when no Confetti host is
mounted; ButteryProvider mounts one. |
Accessibility
Decorative and hidden from assistive technology: announce the success itself in text. Never shown with reduced motion.
It takes no keyboard input of its own.
Motion
It celebrates a real finish with one short burst, never a routine action.
With reduced motion: It never bursts: celebrate() does nothing, so the success has to be said in text as well.
Layout
It takes no room in the page and no presses: each burst is 5×8px pieces in the toast layer, thrown from the middle of the element passed to celebrate(), or of the window without one, and gone after 900ms.