Hold Button

Hold to confirm, for actions that are hard to undo. Releasing early cancels.

Press and hold the button.

Installation#

pnpm dlx shadcn@latest add @balick/hold-button

Or pass the full URL: https://ui.balick.me/r/hold-button.json

Usage#

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

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

Props#

Prop	Type	Default	Description
`onConfirm` Called once the button has been held long enough. Required.	`() => void`	—	Called once the button has been held long enough. Required.
`duration` How long to hold, in milliseconds.	`number`	1200	How long to hold, in milliseconds.
`variant` Style of the shadcn/ui Button underneath.	`Button variant`	"destructive"	Style of the shadcn/ui Button underneath.