Press-and-hold delete button
Keep it pressed to confirm: the button fills with red, the bin lid trembles and the action only fires once the bar is full.
Settings
Code
<button class="uvq01-hld" type="button"><span class="f" aria-hidden="true"></span><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g class="lid"><path d="M4 7h16"/><path d="M9.5 7V4.5h5V7"/></g><path d="M6 7l1 13h10l1-13"/><path d="M10 11v5M14 11v5"/></svg></span><span class="w"><span class="t">Hold to delete</span><span class="d">Deleted</span></span></button>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 Buttons
See all ButtonsWhere to use it
Destructive actions deserve a little friction, and this button asks for it physically: the user has to hold it down while a red bar crosses from left to right and the lid of the bin icon starts to rattle. Releasing early drains the bar back. It works with mouse, touch and the keyboard, which makes it a good fit for deleting accounts, files or projects.
Set how long the press must last with the hold time slider; around one and a half seconds feels deliberate without being annoying. Keep the main color red or orange so the risk reads at a glance, and place a normal cancel button next to it.