Motion UISections4 sections

Buttons

Multi-state feedback buttons, hold-to-confirm actions and add-to-basket morphs.

Button: Rolling text

An example of a primary call-to-action whose duplicate label rolls into place on hover or keyboard focus in Motion for React.

npx shadcn@latest add @motion/button-rolling-text
Components usedRollingTextButton
Install guideMotionScore

Button: Staggered rolling text

An example of a primary call-to-action whose duplicated label is split into characters and rolled into place with a stagger in Motion for React.

npx shadcn@latest add @motion/button-rolling-text-stagger
Components usedRollingTextButton
Install guideMotionScore

Add to basket button

An example of an add-to-basket button that flies the product into the basket along a curved arc with a spring recoil, in Motion for React.

npx shadcn@latest add @motion/button-add-to-basket
Components usedAddToBasket
Install guideMotionScore

Hold to confirm button

An example of a hold-to-confirm button with press-and-hold progress feedback in Motion for React.

npx shadcn@latest add @motion/button-hold-to-confirm
Components usedHoldToConfirm
Install guideMotionScore

More categories

Browse the rest of the Motion UI section library.