Shadcn.io is not affiliated with official shadcn/ui
Long Press Button
Button that requires a press-and-hold gesture to confirm, with a progress fill that animates while held for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Long Press Button preview
Deliberate confirmation, not accidental. This button only fires when you press and hold for a full second, with a fill bar showing your progress. Let go early and nothing happens. It's the right pattern for actions you can't undo — delete, format, wipe — where a one-tap mistake costs real time. The hold time feels intentional without being annoying. Works on mouse, touch, and keyboard. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the long-press-button button into my projectRelated Components
Slide To Confirm Button
Drag to confirm
Shake Button
Triggered error shake
Success Button
Success checkmark state
Ripple Button
Material click ripple
Confetti Button
Particle burst on click
Pulse Button
Pulsing attention rings
FAQ
Was this page helpful?
Sign in to leave feedback.
Loading Button
Button with built-in loading spinner and state management for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Magnetic Button
Button that magnetically follows the cursor with spring physics for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.