Shadcn.io is not affiliated with official shadcn/ui
Success Button
Button that transforms into a success checkmark when completed for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Success Button preview
The most satisfying button state. Click it, watch it transform into a green checkmark with a smooth animation. It tells users "done!" without needing a toast or alert. The checkmark draws itself in, then the button can reset or stay confirmed. Perfect for save buttons, add-to-cart, form submissions—anywhere success feedback matters. That little animation dopamine hit keeps users happy. 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 success-button button into my projectRelated Components
Copy Button
Clipboard with feedback
Loading Button
Async loading state
Pulse Button
Pulsing attention rings
Confetti Button
Particle burst on click
Shake Button
Triggered error shake
Counter Button
Animated increment
FAQ
Was this page helpful?
Sign in to leave feedback.
Stitch Button
Button with a stitched dashed inner border and double inner shadows for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Theme Toggle Button
Theme toggle button with animated sun/moon icon transition for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.