MARKETPLACE
PLUGINS
BETTER TOGGLES
Better Toggles logo

Better Toggles

Published June 2026
   •    Updated this week

Plugin details

Beautiful Toggles – Level Up Your UI
Upgrade your app's user experience instantly. Standard checkboxes and basic switches look outdated and offer very little customization. Beautiful Toggles replaces them with sleek, modern, and highly customizable toggle switches that match your branding perfectly.

Key Features

    [] Fully Customizable Branding: Easily set your exact brand colors (looks incredible with #FF8800) for both the active and inactive states. [] Fluid Animations: Enjoy buttery-smooth micro-interactions and transitions when a user toggles the element. [] Sleek Layout Options: Choose from multiple modern styles including rounded pill, sharp minimalist, or glow effects. [] Lightweight & Fast: Built with clean, optimized code that won't bloat your Bubble app or slow down page load times. [] Responsive Design: Works flawlessly out of the box across mobile, tablet, and desktop viewports. [] Bubble Native Workflow Integration: Triggers native "An input's value is changed" workflows smoothly, making it incredibly easy to save states or trigger actions.

How to Use It

    [] Drop the Beautiful Toggle element onto your page. [] Set your default state (Dynamic or Static). [] Customize the colors, size, and animation style in the property editor. [] Create a workflow triggered by the toggle to update your database or change your UI states seamlessly.

Give your Bubble app the premium feel it deserves. Ditch the boring defaults and start using Beautiful Toggles today!

$15

One time  •  Or  $3/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

HKS Techlabs logo
HKS Techlabs
Joined 2021   •   19 Plugins
View contributor profile

Instructions

How to Use Better Toggles
Setting up Better Toggles in your Bubble application is straightforward. The plugin consists of one visual element, one dedicated workflow action, and one real-time event.

1. The Visual Element
    [] Element Name: Better Toggle [] Setup: Find the Better Toggle element in your visual element picker on the left panel and drag it onto your canvas.
  • Configuration: Open the property editor to define your preset styles, active/inactive states, and your custom brand colors (like #FF8800).

2. The Event (Triggering Workflows)
    [] Event Name: A Better Toggle Value Has Changed [] Setup: Go to your Workflow tab and add a new event. Select Elements -> A Better Toggle Value Has Changed.
  • Usage: Use this event to instantly trigger database updates (e.g., Make changes to a thing) or toggle custom states whenever a user clicks the switch.

3. The Action (Controlling the Toggle Programmatically)
    [] Action Name: Change Toggle Value A Better Toggle [] Setup: Within any Bubble workflow (such as a page load event or a "Reset" button click), add an action and look under Element Actions -> Change Toggle Value A Better Toggle.
  • Usage: Use this action to programmatically flip the toggle switch 'On' or 'Off' from outside the element itself, keeping your UI synchronized perfectly.

Demo Editor: https://bubble.io/page?id=hks-demos&test_plugin=1780643497974x757029781150105600_current&tab=Design&name=better-toggles&type=page&elements=cmOIZ

Demo Page: https://hks-demos.bubbleapps.io/version-test/better-toggles?debug_mode=true

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Chat   •   Analytics   •   Technical   •   Productivity   •   Social Network   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble