LikeButton and confetti

A like button whose heart fills and bursts into particles, and confetti with gravity for the big moments.

import { confetti } from '@alea/ui';
import { LikeButton } from '@alea/pro';

Examples

Like with particles

The heart fills, pops and bursts; a toggle button with a name and a count.

Confetti

For the big moment only: a launch, a first sale. Falls from the top, or bursts from a point. Nothing with reduced motion.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-surface-hover…
--alea-text…
--alea-text-muted…

Space

--alea-space-2…
--alea-space-3…

Radius

--alea-radius-full…

Type

--alea-font-weight-medium…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-duration-slow…
--alea-motion-spring…

Other

--alea-reaction-like…

Props

`LikeButton` props

A heart that fills, pops and bursts into particles when liked; a toggle button underneath.

Prop	Type	Default
`className`	`string`	-
`count`	`number`	-
`defaultSelected`	`boolean`	`false`
`isSelected`	`boolean`	-
`label`	`string`	`'Like'`
`onChange`	`((liked: boolean) => void)`	-

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.

States: Hover (CSS)
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-like
Data attributes: data-on

LikeButton is a toggle button (aria-pressed) with a name, and its count is read with it.
Confetti and particles are decoration, hidden from screen readers, and do nothing with reduced motion.

Keyboard

Key	Does
`Enter` or `Space`	Toggles the like

Do and don't

Confetti once, for a moment that matters: a launch, a first sale, a goal.

Don't

Don't fire confetti on routine actions; it stops meaning anything.