'/%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}
Avisos
Celebrate
Una pequeña ráfaga de confeti para algo que salió bien, lanzada desde un elemento o un punto. Nunca mueve la página, no recibe clics ni foco y se elimina sola. Con movimiento reducido muestra un check fijo.
import { Celebrate, celebrate } from '@alea-design/ui';
Ejemplos
Confeti al confirmar
HoldButton lanza confeti cuando se completa la pulsación (celebrate). El resultado también se anuncia y se muestra como texto: el confeti es decoración.
Celebrate alrededor de un botón
Envuelve cualquier elemento y activa fire cuando algo salió bien. Con movimiento reducido muestra un check fijo en la esquina.
Props
Celebrate props
Envuelve un elemento y lanza confeti desde él cuando `fire` pasa a true, una vez por éxito. Acompáñalo de un resultado visible o anunciado: el confeti es decoración.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | El elemento del que sale el confeti. | |
fireobligatoria | number | boolean | Lanza el confeti cuando pasa a true (o, con un número, cada vez que cambia a un valor mayor que 0): actívalo cuando la acción salió bien. | |
className | string | ninguno | Clases extra para el elemento raíz. |
colors | string[] | ninguno | Colores CSS para las piezas, usados por turnos. Por defecto: los tokens de acento y los colores de éxito y advertencia. |
count | number | 32 | Cuántas piezas. Por defecto 32, nunca más de 80. |
duration | number | 1400 | Cuánto tardan las piezas en caer, en ms. Por defecto 1400. |
onDone | (() => void) | ninguno | Se llama cuando el confeti (o el check fijo) ya no está. |
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.
- 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-celebrate-host
Accesibilidad
- El confeti es decoración: se oculta a los lectores de pantalla y no lleva información. Anuncia el resultado con texto (un estado, un aviso, la región en vivo de HoldButton).
- Con movimiento reducido, o sin movimiento, muestra un check fijo un momento y ninguna pieza se mueve.
- Ignora el puntero (nunca bloquea un clic) y nunca toma el foco.
Qué hacer y qué evitar
Hacer
- Úsalo para un éxito real que causó la persona: un pedido confirmado, una página publicada.
- Úsalo poco; si salta cada pocos segundos deja de significar algo.
- Di el resultado también con texto.
Evitar
- No celebres errores, eliminaciones ni guardados de rutina.
- No lo uses para explicar algo: desaparece en un segundo y los lectores de pantalla nunca lo oyen.
- No apiles varios a la vez: uno nuevo reemplaza al que aún se ve.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.
Celebrate · 2 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Motion | Variant | Confetti, Reduced | Confetti | sin prop de React |