Button
Hold to Confirm
Confirmation without a dialog: a fill creeps across the button while it is held and springs back if you let go too early.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the captions and the note (label, doneLabel, hint)
- the hold time through the duration prop, in milliseconds: 800 for a routine confirmation, 1500 for a genuinely dangerous one
- the accent and the backdrop through the accent and background props
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/button-073?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Button073 label="Hold to delete" duration={800} />A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Label
label· default: Hold to delete- Confirmed label
doneLabel· default: Done- Hold time, ms
duration· default: 800- Accent
accent· default: theme colour- Backdrop
background· default: theme colour
More in Button
FAQ
- How do I add Hold to Confirm with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Hold to Confirm depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Hold to Confirm?
- Adapt: the captions and the note (label, doneLabel, hint); the hold time through the duration prop, in milliseconds: 800 for a routine confirmation, 1500 for a genuinely dangerous one; the accent and the backdrop through the accent and background props. Keep as installed: the linear progress of the fill while holding: it must report the remaining time honestly rather than sweeten it with a curve; the springy rollback on an early release — that is the signal that nothing happened; the link between CSS and the timer through the --vibeui-button-073-hold variable: two independent durations will drift apart.
- Is Hold to Confirm free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/button-073.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-button-073-* variables. The fill is a separate layer scaled on the X axis with a left transform-origin: animating width would relayout every frame. The duration arrives as the --vibeui-button-073-hold variable from the duration prop, so the CSS transition and the JS timer cannot drift apart. There are three states — idle, holding, done; done holds for 1400 ms and returns to idle on its own. Pointer and keyboard behave alike: pointerdown and keydown start it, pointerup, pointerleave, pointercancel and keyup cancel it. The theme comes from the surroundings via light-dark() plus a rule for the .dark class.
Tags
- button
- hold
- confirm
- progress
- destructive
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…