Hold ToConfirm

A button that requires holding down to confirm irreversible or critical actions.

Installation

npx shadcn@latest add @scrollxui/hold-toconfirm

Usage

import { HoldToConfirm } from '@/components/ui/hold-toconfirm';

<HoldToConfirm
  variant='style'
  size='dimension'
  duration={time}
  onConfirm={callback}
  animation='border-or-fill'
  fillClassName='styles'
  confirmedChildren={content}
  confirmedClassName='styles'
  resetAfter={time}
  showProgressOnConfirm={boolean}
>
  content
</HoldToConfirm>

Examples

Border Variant

API Reference

Hold ToConfirm

A button that requires holding down to confirm irreversible or critical actions.

Props

Property	Type	Default	Description
`asChild`	boolean	`false`	Renders as a span instead of a button when true.
`duration`	number	`2000`	Hold duration in milliseconds required to confirm.
`onConfirm`	() => void	`-`	Callback fired once the hold is successfully confirmed.
`animation`	"border" \| "fill"	`"fill"`	Style of the progress animation: border outline or background fill.
`fillClassName`	string	`-`	Classes applied to the progress fill/border element.
`confirmedChildren`	ReactNode	`-`	Content shown inside the button after confirmation.
`confirmedClassName`	string	`-`	Classes applied to the confirmed state content.
`resetAfter`	number	`2000`	Time in milliseconds after which the button resets state.
`showProgressOnConfirm`	boolean	`false`	Keeps progress visible after confirmation instead of resetting immediately.
`children`	ReactNode	`"Hold"`	Button label or content shown before confirmation.
`variant`	string	`-`	Variant styles inherited from Button (e.g., default, outline).
`size`	string	`-`	Size styles inherited from Button (e.g., sm, lg).
`className`	string	`-`	Additional custom classes applied to the button.