Nuevo inicio de sesiónMac en Lisboa, hace 2 minutos
Gracias, todo en orden.
Hemos cerrado esa sesión. Cambia tu contraseña.
HTML + CSSToasts
Toast de nuevo inicio de sesión
Alerta de acceso desde un dispositivo nuevo con dos respuestas: fui yo o no fui yo.
Ajustes
16px
1x
Código
<div class="uv-qlg"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="alert"><div class="hd"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/><path d="M12 8.5v4M12 15.5v.01"/></svg></span><span class="tx"><b>Nuevo inicio de sesión</b><small>Mac en Lisboa, hace 2 minutos</small></span></div><div class="ac"><button type="button" class="ys">Fui yo</button><button type="button" class="no">No fui yo</button></div><p class="ok r1">Gracias, todo en orden.</p><p class="ok r2">Hemos cerrado esa sesión. Cambia tu contraseña.</p></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
Los avisos de seguridad de una cuenta tienen que ser claros y accionables a la vez. Esta alerta enseña un escudo, el dispositivo, la ciudad y la hora del nuevo acceso, y dos botones. Fui yo da las gracias, pasa el icono a verde y se cierra; No fui yo muestra en rojo que la sesión se ha cerrado y pide cambiar la contraseña.
El toast usa role alert, así que se anuncia al momento. Conecta cada botón con tu backend y usa palabras sencillas para que nadie dude cuando algo no cuadra.