'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
Celebrate
A small burst of confetti for something that worked, thrown from an element or a point. It never moves the page, takes no clicks or focus and removes itself. With reduced motion it shows a still check instead.
import { Celebrate, celebrate } from '@alea-design/ui';
Examples
Confetti on confirm
HoldButton throws confetti when the hold completes (celebrate). The result is also announced and shown as text: the confetti is decoration.
Celebrate around a button
Wrap any element and set fire when something worked. With reduced motion it shows a still check on the corner instead.
Props
Celebrate props
Wraps an element and throws confetti from it when `fire` turns true, once per success. Pair it with a visible or announced result: the confetti is decoration.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | The element the confetti comes out of. | |
firerequired | number | boolean | Throws the confetti when this turns true (or, for a number, each time it changes to a new value above 0): set it when the action succeeded. | |
className | string | none | Extra class names for the root element. |
colors | string[] | none | CSS colors for the pieces, used in turn. Default: the accent tokens and the success and warning colors. |
count | number | 32 | How many pieces. Default 32, never more than 80. |
duration | number | 1400 | How long the pieces take to fall away, in ms. Default 1400. |
onDone | (() => void) | none | Called when the confetti (or the still check) is gone. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-celebrate-host
Accessibility
- The confetti is decoration: it is hidden from screen readers and carries no information. Announce the result in text (a status, a toast, the live region of HoldButton).
- With reduced motion, or motion off, it shows a still check mark for a moment and no pieces move.
- It ignores the pointer (it never blocks a click) and never takes focus.
Do and don't
Do
- Use it for a real success the person caused: a confirmed order, a published page.
- Keep it rare; if it fires every few seconds it stops meaning anything.
- Say the result in text as well.
Don't
- Don't celebrate errors, deletions or routine saves.
- Don't use it to explain something: it disappears in a second and screen readers never hear it.
- Don't stack several at once: a new one replaces the one still showing.
In Figma
The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.
Celebrate · 2 variants
| Figma property | Kind | Values | Default | React prop |
|---|---|---|---|---|
| Motion | Variant | Confetti, Reduced | Confetti | no React prop |