Shadcn.io is not affiliated with official shadcn/ui
Icon Button
Animated icon button with active state glow, particles, and color customization for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Icon Button preview
Interactive icon button with delightful active state animations. When activated, the icon fills with color while particles burst outward and a radial glow pulses behind it. Features customizable RGB color, multiple sizes, and optional animation toggle. Built with Motion for React using AnimatePresence for seamless state transitions. Perfect for like buttons, favorites, bookmarks, or any toggle action that deserves celebration. 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 icon-button button into my projectRelated Components
Copy Button
Clipboard with feedback
Success Button
Success checkmark state
Theme Toggle Button
Animated sun/moon swap
Counter Button
Animated increment
GitHub Stars Button
Live GitHub star count
Pulse Button
Pulsing attention rings
FAQ
Was this page helpful?
Sign in to leave feedback.
Gradient Button
Button with a vibrant animated linear-gradient background that shifts colors continuously for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Input Button
Expandable input button that transforms from button to input field with smooth animations for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.