Eliminar el proyecto

Se borrarán sus 128 archivos y el historial. Escribe nebula-app para confirmar.

HTML + CSSOverlays

Type to confirm delete dialog

A danger dialog that only allows deleting once you type the exact project name.

Settings

16px
1x

Code

<div class="uv-otc"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Delete project</button><div class="scr"></div><div class="dl" role="alertdialog" aria-modal="true" aria-labelledby="uv-otc-t" aria-describedby="uv-otc-d"><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 3.5L2.5 20h19z"/><path d="M12 10v4.5M12 17.5v.01"/></svg></span><p class="ti" id="uv-otc-t">Delete the project</p><p class="ds" id="uv-otc-d">Its 128 files and history will be deleted. Type <code>nebula-app</code> to confirm.</p><input aria-label="Project name" autocomplete="off" spellcheck="false"><div class="ac"><button type="button" class="cl">Cancel</button><button type="button" class="dg" disabled>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 Overlays

See all Overlays

Where to use it

Irreversible actions such as deleting a project, a database or a repository deserve one more step than a click. This alert dialog explains what will be lost and asks people to type the project name; the delete button stays disabled and faded until the text matches exactly, then it lights up with a small pulse.

Focus moves to the input on open, Escape cancels and the dialog uses the alertdialog role with a label and description. Change the project name with the text control, and keep the red tone for the action so its weight is clear.