Button Components
Free animated React buttons: hold to confirm, slide to confirm, magnet, particle, undo and save buttons with real feedback, built with Tailwind CSS and Motion.
Buttons for the moments where a plain click isn't enough: confirming something destructive, showing progress, undoing a mistake or saving with feedback. Each one is a React component built with Tailwind CSS and Motion, installed with the shadcn CLI.
- BT-01Particle ButtonUpdatedA status button for async actions, with a spinner, a drawn check and a particle burst on success.
- BT-02V0 ButtonOpen in v0 button that sends a component registry JSON to v0.dev for instant editing, built with React, the shadcn Button, and Tailwind CSS.
- BT-03Gradient ButtonUpdatedLayered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback and an optional icon.
- BT-04Magnet ButtonUpdatedA call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor.
- BT-05Hold ButtonUpdatedPress and hold to confirm, with a fill that drains back on early release and a drawn check on completion.
- BT-06Command ButtonUpdatedA button with its shortcut drawn as keycaps that sink as you press the real keys.
- BT-07Switch ButtonUpdatedLight and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle.
- BT-08Slide Text ButtonAnimated link button with a vertical text slide on hover and default and ghost variants, built with React, Next.js Link, and Tailwind CSS.
- BT-09Pull CordNewA lamp switch you pull on a swinging cord, built with React and a rope simulation.
- BT-10Tear ButtonNewA confirm button you tear off like a ticket stub, hole by hole.
- BT-11Bell ButtonNewA subscribe button whose bell swings and rings, with a clapper that really strikes.
- BT-12Morph PopoverNewA button that grows into the form it opens, with its label sliding up to become the title, then shrinks into a confirmation.
- BT-13Undo ButtonNewAn action button that gives you a few seconds to take it back, with the time left drawn around its own edge.
- BT-14Slide to ConfirmNewA confirm control for payments and other actions you can't take back. Slide the thumb to the end, or flick it.
- BT-15Save ButtonNewA bookmark button that files into collections. Tap to save to the last one, then change it or make a new one from the strip.
- BT-16Cart ButtonNewAn Add button that opens into a quantity stepper in place, with a bin at one and press-and-hold to repeat.
