Hold to Confirm

A press-and-hold button that fills a progress ring before confirming destructive actions.

@spectrumui/hold-to-confirm

acme-website

Production · last deployed 2h ago

Press and hold the button — release early to cancel

Installation

Usage

import { HoldToConfirmButton } from "@/components/spectrumui/hold-to-confirm"

<HoldToConfirmButton onConfirm={() => console.log("confirmed")} />

API Reference

HoldToConfirmButton

Renders a single button element. Holding it down with a pointer, Space or Enter fills the ring over duration milliseconds and fires onConfirm exactly once on completion. A polite live region announces the confirmation to screen readers.

Prop	Type	Default	Description
*`onConfirm`	`() => void`	-	Fires exactly once when the hold reaches completion
`duration`	`number`	`1200`	How long the button must be held, in milliseconds
`label`	`string`	`"Hold to delete"`	Idle label
`confirmedLabel`	`string`	`"Deleted"`	Label shown after a completed hold
`icon`	`React.ReactNode`	-	Replaces the default trash icon
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the button
`resetDelay`	`number`	`1500`	Milliseconds before resetting to idle after confirming; 0 keeps the confirmed state
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction
`className`	`string`	-	Additional classes merged with the default button styles

Hold to Confirm

Installation

Usage

API Reference

HoldToConfirmButton

Examples

Sizes and custom duration