Browse components
Hold To Confirm
Destructive action guard: press and hold until the bar fills. Works with Space and Enter.
Installation
npx shadcn@latest add @glint-ui/hold-to-confirmFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/hold-to-confirm.json
Usage
import { HoldToConfirm } from "@/components/ui/hold-to-confirm";
<HoldToConfirm onConfirm={() => deleteProject(id)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 1500 | Ms the button must be held. |
| label | string | "Hold to delete" | Idle label. |
| confirmedLabel | string | "Deleted" | Label after confirming. |
| color | string | "#ef4444" | Fill color. |
| onConfirm | ReactNode | — | Called once the hold completes. |
| className | string | — | Extra classes for the root element. |