Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn alert dialog whose delete button must be held down with a pointer or Space until a bar fills, and which resets if released early, blurred or cancelled.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when the cost of a mistake is very high and a click is too easy to make by accident, such as deleting a production database or a customer account.
Do not use it as the only way to do something: holding is hard with some assistive devices and tremors. Pair it with a different route, or choose a typed confirmation.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
onConfirm | () => void | - | Runs when the hold completes. |
holdMs | number | 1500 | Milliseconds to hold. |
children | ReactNode | - | The trigger. |
title, description | ReactNode | - | Dialog text. |
label | string | Hold to delete | Text on the hold button. |
| Key | Action |
|---|---|
| Hold Space or Enter | fills the bar; release early to cancel |
| Tab | Cancel, then the hold button |
| Escape | cancels |
The pattern ships a Testing Library test (confirm-hold-to-delete.test.tsx) that covers completing a hold, releasing early, keyboard hold and key repeat, blur cancelling and the description.