LikeButton y confeti

Un botón de me gusta cuyo corazón se llena y estalla en partículas, y confeti con gravedad para los grandes momentos.

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

Ejemplos

Me gusta con partículas

El corazón se llena, salta y estalla; un botón de alternancia con nombre y contador.

Confeti

Solo para el gran momento: un lanzamiento, una primera venta. Cae desde arriba, o estalla desde un punto. Nada con movimiento reducido.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

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

Un corazón que se llena, salta y estalla en partículas al darle me gusta; un botón de alternancia por debajo.

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

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Estados: Hover (CSS)
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-like
Atributos data: data-on

LikeButton es un botón de alternancia (aria-pressed) con un nombre, y su contador se lee con él.
El confeti y las partículas son decoración, ocultos para lectores de pantalla, y no hacen nada con movimiento reducido.

Teclado

Tecla	Acción
`Enter` o `Espacio`	Alterna el me gusta

Qué hacer y qué evitar

Hacer

Confeti una vez, para un momento que importa: un lanzamiento, una primera venta, una meta.

Evitar

No lances confeti en acciones rutinarias; deja de significar algo.