Hold Button

New

Press and hold to confirm. A fill sweeps across while held and drains back if you let go early.

motionutils

Installation

$ pnpm dlx shadcn@latest add @soultel/hold-button

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/hold-button.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/hold-button.tsx.

Usage

example.tsx5 lines

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

export function Example() {
  return <HoldButton onConfirm={() => deleteProject()}>Hold to delete</HoldButton>
}

Props

Prop	Type	Default	Description
onConfirm	() => void	-	Called once the hold completes.
duration	number	1200	Hold time in ms.
confirmedLabel	ReactNode	"Deleted"	Shown briefly after confirming.