# Hold to confirm · MIAN

A button that must be held for a moment before it acts. For actions that are hard to undo, without a second dialog.

- Id: `hold-button` · Category: Actions · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/hold-button
- Use for: hold to delete, press and hold to confirm, safe destructive action.
- Alternatives: modal.
- Avoid: Not for everyday actions: holding is slow on purpose.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Delete

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/hold-button/source