React Button and Toggle Components
Magnetic buttons, press-and-hold confirmation, loading states, theme switches and segmented controls. Buttons see more interaction than anything else on a page, which is where micro-interactions pay off most and where they most easily become irritating.
18 components, 18 of them free to install without an account.
- Magnetic ButtonFree
A magnetic button that is pulled towards the cursor as it approaches, with a parallax on the inner text and a spring back once the cursor leaves.
- Theme ToggleFree
A light/dark theme toggle button: View Transitions expand a circle out from the click point, and the Sun/Moon icons rotate through the transition.
- Play/Pause MorphFree
A graphical button that morphs smoothly between a play triangle and pause bars, with controlled and uncontrolled modes and an optional progress ring.
- Hold-to-ConfirmFree
A press-and-hold fill confirmation button: holding fills the progress from left to right with a slight tremor near completion, and only a full fill triggers it — preventing accidental taps on dangerous actions.
- Gooey ButtonFree
A liquid gooey button: droplets at the bottom fuse through an SVG goo filter, well up to cover the button on hover, and splash out thick droplets at the click point.
A button you can drag that springs back and snaps: wherever you drag it, on release a spring snaps it to the nearest snap point — with multiple snap points, arrow-key switching, and a pure spring-back mode.
- Stateful ButtonFree
A state-machine button running idle → loading → success / error, switching automatically from an async onClick, with the content crossfading and the width morphing along with it.
- Shimmer ButtonFree
A shimmer button with light flowing around its edge, an inner highlight lining, and dimensional hover feedback.
- Ripple ButtonFree
A button with a spreading click ripple, radiating a Material-style wave out from the click point.
- Rainbow ButtonFree
A button with a flowing rainbow gradient animation, in solid and outline styles, with a soft glow in matching hues.
A standout button with a glowing border that travels, a comet-like point of light patrolling around the rounded frame.
On hover, liquid rises from the bottom with a wave to fill the button and the text inverts.
- Slide To UnlockFree
A confirmation control that only fires once the thumb is dragged all the way, preventing accidental taps.
A segmented control whose selected block flows and morphs to the new option on a spring.
- Equalizer ToggleFree
A sound toggle: the equalizer bars dance while it is on, and freeze in grayscale when it is off.
- Tactile ButtonFree
A two-layer physical key React component — the face floats above a solid base, dips 2px on hover and bottoms out on press, with depth from solid colour rather than blurred shadows.
- SwitchFree
A spring-driven React switch whose thumb can be dragged to toggle, with optional crossfading icons inside the thumb, a pressed-state toggle-button variant and native form submission.
A two-state text switch (e.g. Ask | Auto) with a glassy spring-driven thumb and labels that cross-fade with the thumb position — for operating-mode toggles.