Hold to confirm
A button that must be held for a moment before it acts. For actions that are hard to undo, without a second dialog.
Delete
<div class="mn-row"><button class="mn-btn mn-danger mn-hold" type="button" data-mn-hold data-mn-hold-done="Deleted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg> Hold to delete</button><button class="mn-btn mn-btn-outline mn-hold" type="button" data-mn-hold data-mn-hold-done="Published" style="--_hold:800ms">Hold to publish</button></div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/hold-button.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-hold | On an mn-btn, with data-mn-hold. A fill sweeps across while it is held. |
| --_hold | How long to hold. Default 1200ms. |
| data-mn-hold-done | Text to show once it has fired. |
| mn:confirm | The event to listen for. A plain click does nothing. |
Accessibility
- Works with a pointer, and with Space or Enter held down.
- Say “hold” in the label, so the behaviour is not a surprise.
- Releasing early cancels; nothing happens on a quick click or tap.
- Still offer undo where you can: holding prevents accidents, it does not replace recovery.