Loading…

Hold Button

beta

A button that confirms only after being held: ink sweeps across it while pressed, drains back if let go, and settles into a tick when the hold completes.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add hold-button

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { HoldButton } from "@/components/ui/hold-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Destructive
Stays Confirmed
Sizes
Quick
Disabled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<HoldButton>

Prop	Type	Default
`announcement` Announced on confirmation. Defaults to `confirmedLabel` when it is text.	`string`	—
`confirmedLabel` Shown once confirmed.	`ReactNode`	`"Confirmed"`
`hint` Instructions attached with aria-describedby.	`string`	`"Press and hold to confirm."`
`holdDuration` Milliseconds the button must be held. Default 1200.	`number`	`1200`
`icon` Glyph beside the label; a tick replaces it on confirmation.	`ReactNode`	—
`label` Resting label, and the button's accessible name.	`ReactNode`	`"Hold to confirm"`
`onConfirm` Called once when a hold completes.	`() => void`	—
`onHoldCancel` Called when a hold is let go before it completes.	`() => void`	—
`onHoldStart` Called when a hold begins.	`() => void`	—
`resetAfter` Milliseconds after confirming before it returns to rest. Omit to stay confirmed.	`number`	—
`variant`	`"default" \| "destructive"`	`"default"`

Accessibility

A real button named by its resting label throughout; the hold instructions ("Press and hold to confirm.") are attached with aria-describedby and the confirmation is announced once through a polite live region. Holding Enter or Space works like holding the pointer, and focus leaving lets go. A click on its own does nothing, so a screen reader's synthetic browse-mode click cannot confirm: users hold the key in focus/forms mode, or long-press on touch. Once confirmed the button is aria-disabled (without dimming) until resetAfter. The ink copy, icon, tick and changing labels are aria-hidden. Under reduced motion the full hold is still required, the ink moves in quarter steps without a sweep and the label shows the percentage held.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

announcement

Announced on confirmation. Defaults to confirmedLabel when it is text.

string

—

confirmedLabel

Shown once confirmed.

ReactNode

"Confirmed"

hint

Instructions attached with aria-describedby.

string

"Press and hold to confirm."

holdDuration

Milliseconds the button must be held. Default 1200.

number

1200

icon

Glyph beside the label; a tick replaces it on confirmation.

ReactNode

—

label

Resting label, and the button's accessible name.

ReactNode

"Hold to confirm"

onConfirm

Called once when a hold completes.

() => void

—

onHoldCancel

Called when a hold is let go before it completes.

() => void

—

onHoldStart

Called when a hold begins.

() => void

—

resetAfter

Milliseconds after confirming before it returns to rest. Omit to stay confirmed.

number

—

variant

"default" | "destructive"

"default"