¿Eliminar 3 fotos?
Se borrarán de todos tus dispositivos. Esta acción no se puede deshacer.
Glass alert dialog
A glass confirmation dialog that pops in with a bounce and has two actions split by hairlines.
Settings
Code
<div class="uv-gal"><button type="button" class="fire">Show alert</button><div class="dl" role="alertdialog" aria-labelledby="uv-gal-t" aria-describedby="uv-gal-d"><p class="ti" id="uv-gal-t">Delete 3 photos?</p><p class="ds" id="uv-gal-d">They’ll be removed from all your devices. This can’t be undone.</p><div class="ac"><button type="button" class="cl">Cancel</button><button type="button" class="dg">Delete</button></div></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 Liquid Glass
See all Liquid GlassWhere to use it
System alerts in the new glass style feel lighter than a solid modal while still demanding a decision. This dialog appears over a vivid aurora with a quick overshoot, uses a stronger frosted panel so the text stays readable, and offers Cancel and a red destructive action divided by fine translucent lines, exactly like native alerts.
It uses the alertdialog role with a label and description, moves focus to Cancel when it opens and closes with Escape or either button. The replay button below shows the entrance again, and the blur and tint sliders adjust the glass to any background.