Hold-to-Confirm

A destructive action button that requires a specific "hold" duration to trigger. This replaces annoying "Are you sure?" confirmation modals with a more physical, deliberate interaction.

Usage

Each variant is installed as a separate component to keep your bundle size small. Choose the style that matches your design system.

Neo-SaaS Style

Clean, danger-red button with a smooth fill animation.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/hold-to-confirm-neo-saas.json"

Neo-Brutal Style

High-stakes, arcade-style button with a liquid fill and textured overlay.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/hold-to-confirm-neo-brutal.json"

Glassomorphic Style

Futuristic, "unlock" style interaction with glowing progress and blur effects.

Long Press to Unlock

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/hold-to-confirm-glassomorphic.json"

API Reference

Props

Prop	Type	Default	Description
`onConfirm`	`() => void`	-	Callback function trigger upon successful completion of the hold action.
`duration`	`number`	`1500` / `2000`	The duration in milliseconds required to confirm the action.
`className`	`string`	-	Additional CSS classes for the container.
`initialText`	`string`	(Variant dependent)	Text displayed in the idle state.
`confirmedText`	`string`	(Variant dependent)	Text displayed after confirmation.
`holdingText`	`string`	(Variant dependent)	Text displayed while holding (Neo-SaaS / Neo-Brutal only).