Confetti

A celebratory particle burst.

import { BuiConfetti } from 'ng-blatui';

<bui-confetti><button buiButton>Launch 🎉</button></bui-confetti>

Custom colors

<bui-confetti [colors]="['#f43f5e', '#8b5cf6', '#0ea5e9']" [count]="120">
  <button buiButton variant="outline">Celebrate 🎊</button>
</bui-confetti>

Directions

<!-- direction = down (default) | up | left | right | radial -->
<bui-confetti direction="up"><button buiButton>Up</button></bui-confetti>
<bui-confetti direction="radial"><button buiButton>Radial</button></bui-confetti>

Fullscreen

<!-- rains across the whole viewport instead of bursting from the trigger -->
<bui-confetti [fullscreen]="true" [count]="160">
  <button buiButton>Rain confetti 🌧️</button>
</bui-confetti>

API reference

Inputs

Prop	Type	Default	Description
`count`	`number`	`80`	Number of particles emitted per burst.
`spread`	`number`	`70`	Horizontal spread factor of the burst.
`direction`	`ConfettiDirection`	`'down'`	Direction the particles fly out from the origin.
`fullscreen`	`boolean`	`false`	Rain confetti across the whole viewport instead of bursting from the trigger.
`colors`	`readonly string[] \| null`	`null`	Particle colours; defaults to the built-in palette.

Types

ConfettiDirection — Burst direction of the confetti particles.

"down" | "left" | "radial" | "right" | "up"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.