Search
Search components and blocks
Motion Button
Open pageThe shadcn Button with a subtle spring scale on hover and press, an optional ripple, and respect for reduced-motion preferences — all via Motion.
Install
Props
variant"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""default"size"md" | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""md"ripplebooleanfalseloadingbooleanfalseA pill button that's solid at rest and sweeps into a gradient on hover. Pick a color pair in the corner.
Props
size"sm" | "md" | "lg" | "default""md"loadingbooleanfalsefromstring"#f97316"tostring"#ec4899"A dark button with a gradient arrow tile. On hover it fills white from the exact spot the pointer entered while the label rolls to a new line of copy and the arrow slides in from the left; it drains back toward wherever the pointer leaves.
Props
hoverLabelReactNodechildrensize"sm" | "md" | "lg""md"loadingbooleanfalsefromstring"#8b64ff"tostring"#6232e0"A glossy button, in six colors, with a bevelled top highlight and a leading icon. Hover lifts it with a soft glow while the icon tilts; press springs it down.
Props
color"emerald" | "blue" | "violet" | "rose" | "amber" | "slate""emerald"iconReact.ReactNode—childrenReact.ReactNode—size"sm" | "md" | "lg""md"loadingbooleanfalseA solid rose button with a dark outline, a soft top highlight and a drop glow. Hover lifts it and brightens the glow; press springs it down.
Props
color"rose" | "blue" | "emerald" | "violet" | "amber" | "slate""rose"childrenReact.ReactNode—size"sm" | "md" | "lg""md"loadingbooleanfalseA gradient button with a solid outer ring and a dashed white line stitched just inside it, in six colors. Hover lifts it while the arrow slides forward; press springs it down.
Props
color"violet" | "orange" | "blue" | "emerald" | "rose" | "slate""violet"childrenReact.ReactNode—size"sm" | "md" | "lg""md"loadingbooleanfalseHover and the label dissolves letter by letter into a blur while the icon slides up from the bottom edge — out of focus, then springing sharp at the center. Move away and everything blurs back. The width never changes, so nothing around it shifts.
Props
iconReact.ReactNode—childrenstring—size"sm" | "md" | "lg""md"loadingbooleanfalseA button whose label and icon swap on click. Pulse mode reverts back on its own (a confirmation like 'Copied!'); toggle mode stays swapped until clicked again (a persistent state like light/dark) — switch between them with the mode prop.
Pulse — reverts on its own
Toggle — stays until clicked again
Colored — toggle + activeClassName
Props
mode"pulse" | "toggle""pulse"idleLabelReact.ReactNode—activeLabelReact.ReactNode—idleIconReact.ReactNode—activeIconReact.ReactNode<CheckIcon />resetAfternumber1600activeClassNamestring—activeboolean—defaultActivebooleanfalseonActiveChange(active: boolean) => void—When to use the button
Use these buttons for primary and secondary actions where plain color changes feel flat. Variants cover gradient calls to action, bevel, emboss and stitched looks, blur on hover, and a button that swaps its label to confirm an action.