Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Highlight Button
Next: Input Button

Icon Button

Animated icon button with active state glow, particles, and color customization for React applications.

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.

Icon Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

Copy Button

Clipboard copy with feedback

Ripple Button

Material Design ripple effect

Magnetic Button

Particle attraction effect

Flip Button

3D flip reveal animation

Theme Toggle Button

Light/dark mode toggle

Liquid Button

Fluid fill animation on hover

FAQ

Highlight Button

Button with a highlight bar that slides across on hover for React.

Input Button

Expandable input button that transforms from button to input field with smooth animations for React applications.