Shadcn.io is not affiliated with official shadcn/ui
Slide To Confirm Button
Pill-shaped track with a draggable handle that fires onConfirm when slid across, iOS-native style, for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Slide To Confirm Button preview
The iOS confirmation pattern, in shadcn form. A draggable handle on a pill-shaped track that needs to be slid across to confirm. The handle resists a little at the start, fills the track with primary-foreground tint as it travels, and snaps back on release if you didn't reach the threshold. It's the right interaction for high-stakes mobile actions — slide to unlock, slide to delete — where one accidental tap is too costly. Built on top of the shadcn Button so the track styling tracks every preset.
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 slide-to-confirm-button button into my projectRelated Components
Long Press Button
Hold to confirm
Pill Button
Pill with inset highlight
Pulse Button
Pulsing attention rings
Magnetic Button
Cursor magnetic pull
Success Button
Success checkmark state
Shake Button
Triggered error shake
FAQ
Was this page helpful?
Sign in to leave feedback.
Shine Button
Sleek button with a diagonal light sweep on hover—that premium shine effect for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Spotlight Button
Button with a soft light that follows your cursor on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.