Pago recibidoDe Lucía Martín, alquiler de octubre+0,00 €
HTML + CSSToasts
Toast de pago recibido
Llega un ingreso y el importe sube contando hasta la cifra final con un brillo verde.
Ajustes
16px
1x
Código
<div class="uv-qpy"><button type="button" class="fire">Simular ingreso</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10l9-5.5 9 5.5M5 10.5v7M9.5 10.5v7M14.5 10.5v7M19 10.5v7M3 20h18"/></svg></span><span class="tx"><b>Pago recibido</b><small>De Lucía Martín, alquiler de octubre</small></span><span class="am">+<span class="n" data-v="1250">0,00</span> €</span></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Las apps de banca, facturación y marketplaces hacen que recibir dinero se sienta bien con un pequeño momento de movimiento. Este toast muestra un icono de banco, quién paga y por qué, y un importe que sube contando desde cero con una frenada suave y late con un brillo verde al llegar. La cifra usa los decimales y miles del idioma de la página.
Cambia el importe final con el atributo data y la línea del remitente en el HTML. El toast usa role status y la cuenta es lo bastante rápida para no retrasar la lectura.