Logro desbloqueadoRacha de 7 días+50 XP
HTML + CSSToasts
Toast de logro desbloqueado
Una medalla entra girando con un destello y chispas, junto a los puntos de experiencia ganados.
Ajustes
16px
1x
Código
<div class="uv-qac"><button type="button" class="fire">Repetir</button><div class="tt" role="status"><span class="md" aria-hidden="true"><i class="sp"><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></i><span class="bd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.4l-4.8 2.5.9-5.4-3.9-3.8 5.4-.8z"/></svg></span></span><span class="tx"><small>Logro desbloqueado</small><b>Racha de 7 días</b></span><span class="xp">+50 XP</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 gamificadas de deporte, idiomas o productividad premian los hitos con un momento de celebración. Este toast sube en una barra violeta mientras una medalla dorada gira hasta su sitio, un reflejo la cruza, ocho chispas salen disparadas y al final aparece una etiqueta de +50 XP. El nombre del logro sale del control de texto.
La celebración suena una vez cada vez que entra el toast y queda quieta con movimiento reducido. El toast tiene role status, así que los lectores de pantalla anuncian el logro sin robar el foco.