Gracias, todo en orden.
Hemos cerrado esa sesión. Cambia tu contraseña.
New sign-in alert toast
A security alert about access from a new device with two answers: it was me, or it was not.
Settings
Code
<div class="uv-qlg"><button type="button" class="fire">Show again</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>New sign-in</b><small>Mac in Lisbon, 2 minutes ago</small></span></div><div class="ac"><button type="button" class="ys">It was me</button><button type="button" class="no">It wasn’t me</button></div><p class="ok r1">Thanks, all good.</p><p class="ok r2">We signed that session out. Change your password.</p></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Account security notices need to be clear and actionable at once. This alert shows a shield icon, the device, city and time of the new sign-in, and two buttons. It was me thanks the user, turns the icon green and closes; It wasn't me shows a red confirmation that the session was closed and asks for a new password.
The toast uses role alert, so it is announced immediately. Connect each button to your backend, and keep the wording plain so nobody hesitates when something looks wrong.