Hold ToConfirm

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

Confirm Payment

You are about to buy the Pro subscriptionfor $49.99. Hold the button below to confirm. This purchase will be processed securely.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/hold-toconfirm.json

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

Confirm Payment

You are about to buy the Pro subscriptionfor $49.99. Hold the button below to confirm. This purchase will be processed securely.

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.