03 / Tactile controls
Hold Button
A confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.
Release early to cancel.
Install
Copy the source into your project, or keep it behind a package.
Copy the source into your project and make it yours.
Usage
export function RemoveDownload() {
return (
<HoldButton onComplete={removeDownload}>
Hold to remove download
</HoldButton>
)
}API
onComplete() => voidRuns once after a completed hold or keyboard activation.durationnumberHold time in milliseconds. Defaults to 900, minimum 500.completeLabelReactNodeContent shown after completion.childrenReactNodeThe idle button content....buttonPropsButtonHTMLAttributesNative button attributes except pointer and click handlers.Accessibility
Pointer users hold to confirm. Keyboard and assistive technology users activate the native button once, avoiding a timing barrier. Progress and completion are announced politely.