Foto subida a la galeríaDesliza a un lado para descartar
HTML + CSSToasts
Swipe to dismiss toast
Drag the toast sideways to clear it; it fades as it moves away and springs back if released early.
Settings
16px
1x
Code
<div class="uv-qsw"><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="th" aria-hidden="true"></span><span class="tx"><b>Photo added to the gallery</b><small>Swipe sideways to dismiss</small></span><button type="button" class="x" aria-label="Skip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg></span></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
On phones, people expect to flick notifications away. This toast follows a horizontal drag with a slight tilt and fades as it travels; past a threshold it flies off, otherwise it springs back to the center. A small double arrow hint wiggles twice after it appears, so the gesture is discoverable.
A close button does the same for mouse and keyboard users, and vertical scrolling still works because the toast only captures horizontal movement. Replace the thumbnail and message with your own content.