Button

Enhanced button with loading states, animated icon transitions, and smooth animations powered by Framer Motion.

Documentation

This component extends the shadcn/ui Button. First, install the base component:

Terminal

Then install the required dependencies for animations:

Terminal

example.tsx

Use the variant prop to change the button style.

variants.tsx

Use the size prop to change the button size. Available sizes: sm, default, lg, icon, icon-sm, icon-lg.

sizes.tsx

Add icons from lucide-react before or after the button text. Icons animate smoothly with the button state.

icons.tsx

The loading prop displays an animated spinner and automatically disables the button. When loading, any icons animate out smoothly.

loading.tsx

Use the loaderIcon prop to customize the loading spinner. Pass any Lucide icon component.

custom-loader.tsx

Prop	Type	Default	Description
`loading`	boolean	false	Shows loading spinner and disables button
`loaderIcon`	LucideIcon	Loader2	Custom loading spinner icon
`variant`	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"	Visual style variant
`size`	"sm" \| "default" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"	"default"	Button size
`asChild`	boolean	false	Merge props onto child element (Radix Slot)
`disabled`	boolean	false	Disables button interaction