Toggle Button Components

Dev Design Library indexes 155 toggle button components from 56 open-source UI libraries, with the most coming from Origin UI, ReUI, Theme Toggles, Amicro Micro Transitions and Watermelon UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Toggle button components belong to the Actions group.

Showing 120 of 155, a mix from every library. Open a library to see all of its components.

• Toggleshadcn/ui · ReactA two-state button that can be either on or off.
• Toggle ButtonMUI / Material UI · React
• Bell ToggleReact Bits · ReactPill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and…
• ToggleChakra UI · React
• Toggle ButtonHeroUI · ReactAn interactive toggle control for on/off or selected/unselected states
• Theme TogglerMagic UI · ReactTheme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered…
• Toggle ButtonReact Spectrum · ReactToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.
• Togglecoss ui · ReactA two-state button that can be toggled on or off.
• ToggleOrigin UI · ReactA two-state button that can be toggled on or off.
• Theme SwitchPreline UI · JavaScript (HTML + Tailwind)
• Gradient Button GroupCult UI · ReactPremium layered button group with animated active state, gradient ring accents, and theme toggle underlay
• SwapArk UI · ReactAnimate between two visual states with smooth transitions.
• Like Buttontransitions.dev · HTML/CSS
• Theme toggle button with animated moon and sun iconsReUI · ReactTheme toggle button with animated moon and sun icons
• Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
• Theme SwitchLobe UI · ReactThemeSwitch component is a dropdown menu that allows users to switch between different theme modes.
• AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
• Theme TogglebeUI · ReactTheme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path…
• Theme SelectorRare UI · ReactA row of miniature app previews, one per theme, with a ring that marks the one you pick.
• Like ButtonSpectrum UI · ReactA heart like button micro-interaction with a spring pop, ring pulse, radial particle burst, and a rolling odometer count
• ToggleVengeance UI · React
• Theme SwitcherUser Interface Wiki · React
• ToggleToolcraft · React
• Mode ToggleLaunch UI · React
• Around Theme ToggleTheme Toggles · ReactAn animated sun-and-moon theme toggle with a sweeping transition.
• Toggle ButtonPanel UI · React NativeA button that stays down, on its own or in a group.
• Button 20 - Animated Like ButtonShadcn Space · ReactLike button with burst particle effect and sliding count
• Blur Toggle ButtonPixel Perfect · ReactA button with blur transition effect on toggle using Framer Motion.
• Bluetooth Face WidgetOpenSourceUI · React
• Theme Toggleuselayouts · ReactA physical switch with a dotted grip. Click and the knob slides across a recessed track.
• Like BurstKinetics · HTML/CSSToggles, pops the heart, and emits a radial particle ring
• ThemeBoardUI · React
• Animated Theme TogglerAnimations (Svelte) · SvelteA smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching…
• Like ButtonBadtz UI · ReactA dynamic button that animates on click, creating a burst of heart icons that randomly scatter before fading out.
• ToggleObsidianUI · React
• Blur Fade Theme TransitionGreatUI · ReactLight and dark theme toggle that switches the page with a blur and fade transition.
• Channel Toggleaudiocn · ReactMute, solo and monitor toggle buttons with their own pressed colours.
• toggleBaseLayer · ReactA toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
• ToggleShark UI · ReactTwo-state button that can be toggled on or off.
• Theme ToggleRewamp UI · ReactRewampUI ThemeToggle Component A smooth, tactile Light / Dark mode toggle switch with layout-interpolated spring…
• RealisticSwitchEvil Buttons · ReactA latching push switch, a raised box that sinks into its socket when pressed, stays down and glows while on, and…
• Save ToggleWatermelon UI · React
• Theme switcherArc Library · ReactFour smooth ways to move between light and dark appearance.
• Eye ToggleUI Lab · ReactThe eye shuts when your password is hidden and watches while you type.
• ToggleHextaUI · ReactA button that stays on or off, with a fill that settles in when pressed, a clear hover-to-on step and icons that can…
• AppearanceCojeev UI · ReactChoose from six coordinated palettes and adjust reading contrast across the application.
• Like ButtonROI UI · ReactA button component for liking content.
• Theme switcherFLX UI · ReactRadio group toggling light, dark, and system themes.
• Theme TogglerVelora UI · ReactWipes the new theme in as a circle using View Transitions.
• Outline Like With Countsv-particles · SvelteOutlined like button with a heart and the number of likes next to it.
• Like ButtonSpaceUI · ReactA like button with burst particles, a ripple ring, a spring-animated heart, and a smooth NumberFlow count transition.
• Aria ToggleReScript shadcn · ReScript
• Theme ToggleCue Foundations · React
• Toggle ButtonOUI · ReactReact aria components Toggle Button with shadcn characteristics.
• Theme ToggleEaseUI · ReactLight and dark switch that reveals the new theme as a circle growing from the center of the screen or from the button…
• Swapark-cn · ReactA shadcn-style swap component built with Ark UI primitives.
• Micro SlatsReact Bits · ReactA wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the…
• Tailwind Toggle ButtonReact Spectrum · React
• Comp 102Origin UI · React
• ToggleArk UI · ReactA two-state button that can be toggled on or off.
• Basic toggle.ReUI · ReactBasic toggle.
• Haptic RingAmicro Micro Transitions · ReactHaptic Ring loading animation.
• Switch ButtonKokonut UI · ReactLight and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle.
• Classic Theme ToggleTheme Toggles · ReactAn animated classic sun-and-moon theme toggle.
• Button 21 - Animated Upvote ButtonShadcn Space · ReactUpvote button with ripple, upward particles, and sliding count
• Pearl Toggle ButtonPixel Perfect · ReactPearl Toggle Button component.
• Dnd Face WidgetOpenSourceUI · React
• Circular Theme ProviderGreatUI · React
• Day Night Sky ToggleRewamp UI · React
• RevealButtonEvil Buttons · ReactA button that reveals a hidden secret value on hold or toggle, with a blur-in animation and an eye icon indicator.
• Save Toggle BaseWatermelon UI · React
• EclipseArc Library · ReactThe next appearance crosses the page like an eclipse.
• Like ButtonUI Lab · ReactPops, bursts and rolls the count when you like.
• Theme toggleCojeev UI · ReactA controlled light/dark switch with a morphing sun and moon and a smooth organic page reveal.
• ToggleROI UI · ReactA two-state button that can be turned on or off.
• Rotating Togglesv-particles · Svelte
• Theme ToggleSpaceUI · ReactView Transition API theme switch with circle, blur, rectangle, and polygon reveals.
• Base ToggleReScript shadcn · ReScript
• Toggleark-cn · ReactA shadcn-style toggle component built with Ark UI primitives.
• Pulse HeartReact Bits · ReactLike button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph.
• Vanilla Toggle ButtonReact Spectrum · React
• Comp 103Origin UI · React
• Toggle with text label that changesReUI · ReactToggle with text label that changes
• HeartbeatAmicro Micro Transitions · ReactHeartbeat loading animation.
• Dark Inner Theme ToggleTheme Toggles · ReactAn animated theme toggle with an inward rotating icon.
• Toggle 02 - Animated Like ButtonShadcn Space · ReactAn animated like (heart) button with active scale pop-up animation and particle radial burst effects.
• Toggle ButtonPixel Perfect · ReactAn animated toggle switch with spring physics using Framer Motion.
• Like ButtonOpenSourceUI · React
• Split Theme ProviderGreatUI · React
• Glass Orb ToggleRewamp UI · React
• Switch ModeWatermelon UI · React
• RiseArc Library · ReactThe next appearance rises into place.
• Pull Cord SwitchUI Lab · ReactPull the ball chain to switch the site's lights; light pours from the bulb as a cone.
• ToggleCojeev UI · ReactA small action with a lasting state: a toolbar tool, a paper bookmark or a descriptive preference. Native targets stay…
• Show More Less Togglesv-particles · Svelte
• ToggleSpaceUI · ReactProvides a two-state button that users can press to turn a specific feature, view, or styling option on and off.
• Comp 117Origin UI · React
• Social media reaction togglesReUI · ReactSocial media reaction toggles
• Light Dark MorphAmicro Micro Transitions · ReactTheme toggle whose sun icon changes shape into a moon. Alternador de tema cujo ícone de sol se transforma em lua.
• Dark Side Theme ToggleTheme Toggles · ReactAn animated theme toggle with a side-rotating icon.
• Toggle 03 - Animated Upvote ButtonShadcn Space · ReactAn animated Product Hunt / Reddit style upvote button with bouncing arrow and sliding digit counter.
• Torch Face WidgetOpenSourceUI · React
• Swipe Theme ProviderGreatUI · React
• Landscape Orb ToggleRewamp UI · React
• Switch Mode BaseWatermelon UI · React
• SplitArc Library · ReactThe next appearance opens from a slim center seam.
• Star ButtonUI Lab · ReactSpins once and throws off tiny sparks when starred, then rolls the count.
• Mode SwitcherSpaceUI · React
• Comp 118Origin UI · React
• Toggle with tooltipReUI · ReactToggle with tooltip
• Plus Minus ToggleAmicro Micro Transitions · ReactDual square toggle buttons with solid color fills and spring micro-bounce.
• Eclipse Theme ToggleTheme Toggles · ReactAn animated theme toggle with an eclipse transition.
• Wifi Toggle WidgetOpenSourceUI · React
• Theme TogglerWatermelon UI · React
• Theme ToggleUI Lab · ReactA sun that folds its rays away and turns into a crescent moon.
• Theme SwitcherSpaceUI · React
• Comp 130Origin UI · React
• Disabled toggle statesReUI · ReactDisabled toggle states
• Pumping HeartAmicro Micro Transitions · ReactPumping Heart loading animation.
• Expand Theme ToggleTheme Toggles · ReactAn animated theme toggle with an expanding sun-and-moon transition.

Libraries with toggle button components

• Origin UI
• ReUI
• Theme Toggles
• Amicro Micro Transitions
• Watermelon UI

Related categories

• React Toggle Button Components
• Tailwind CSS Toggle Button Components
• Animated Toggle Button Components
• shadcn/ui Toggle Button Components
• Action Components
• Button Components
• Button Group Components
• Icon Button Components
• Link Components
• Theme Toggle Components
• CTA Button Components
• Copy Button Components
• Like Button Components
• FAB Components
• Social Login Button Components
• Hold Button Components
• Share Button Components
• Slide To Confirm Components
• Download Button Components
• Submit Button Components