Hi Bubblers,
My dev partner and I wanted toggles that look modern, are fun to flip, and whose state is obvious.
This plugin offers 9 highly customizable toggle styles, with juicy animations and satisfying user feedback.
Pick any color, choose from 3 animation curves and 3 sizes, and set a border radius.
You can also add customizable labels or icons (ON/OFF, ACCEPT/REFUSE, ✓/✗) - up to 6 characters long.
The real elements are even smoother; please check them out directly on our demo page!
- Demo app to try every style and option before installing
- See in Bubble Editor for the full range of customization options
- User documentation
- Plugin page
Here is the full features list:
- Hold to confirm: it especially shines on wrapped mobile apps. Use for a press-and-hold confirm of a critical action.
The user holds for a duration you set (300 to 3000 ms), a progress fill sweeps the track as the press builds, and the switch confirms only when the hold completes. Releasing early cancels with no state change, and turning back off is always instant, so a user can abort a critical action in one tap.
- Nine styles in one element: Classic (a refined pill with optional check and cross cues), In track (a static label in the rail), On thumb (a label that rides the thumb), Ink trail (a colored streak with an ON/OFF label that fades in behind the thumb), Slot (a segmented control with both options visible), Spark, Signature, Minimal, and Hold. Switch between them with a single dropdown change.
- A state you can read: show an explicit check and cross cue, or use your own label (up to 6 characters) or an icon per state. The state stays obvious even for users who do not read a bare switch the same way.
- Motion that feels alive: the three animation curves give each flip a springy bounce that feels satisfying, and two styles lean into it. Spark sends a comet once around the rail on switch-on, in a color you choose. Signature crawls a liquid drop across the track, then blooms a halo at the landing point. Both are built with plain SVG and CSS, so they run on every browser.
- Six color fields: track on, track off, thumb, accent, label, and an optional single-track override, each with its own picker and dynamic-expression binding. Bind them to your brand, to a user preference, or to a Bubble Color field. Every change reflects live in the editor preview.
- Sizes and shape: three sizes (S, M, L) and a corner radius slider (0 to 64 px), from a sharp square to a full pill. The preview updates as you adjust them.
- Workflow integration: two states (is_on, state_text), three events (Changed, Switched on, Switched off) for directional workflows, and three element actions (Set state, Toggle, Reset) so a button, a server response, or a scheduled workflow can drive the toggle as if the user had tapped it. Built-in no-op protection means requesting the state the toggle is already in fires no event, so you cannot trigger an infinite workflow loop by accident.
- Accessibility: full keyboard navigation (Tab plus Space or Enter), announced to screen readers as a switch with the correct ARIA role (not a checkbox, which matters on iOS VoiceOver), a 44x44 px minimum touch target on every size, an auto-readable label color computed from WCAG 2.1 luminance when you leave it on default, and respect for the OS reduced-motion preference.
- Live preview in the editor: the toggle renders a real preview in the Bubble editor in its ON state, reflecting your actual style, colors, sizes, and labels, so you see what you are building before you click Preview.
- Sensible defaults and self-correction: every field has a default, so a blank color falls back to a documented value rather than rendering broken. Out-of-range input auto-corrects: radius clamped to range, labels truncated to fit, unparseable colors replaced with the default.
We also built the user documentation we wish every Bubble plugin had: every field explained in plain language, a sizing reference for labeled styles, and a section on each style’s behavior.
Coming next: a native mobile element
Today the plugin is a web element, so it works on web and on wrapped mobile apps. We plan to add a native mobile element to the same plugin as soon as Bubble opens its mobile plugin editor to all developers. It will share the same fields, events, and actions.
Feedback welcome
If you notice a bug, a weird interaction with another plugin, or there is a specific business case you would like the plugin to cover, please reach out. We happily take any question or improvement request. Plus, we react quickly!
More from BetterNotCode
A few other plugins we have built, in the same spirit:
- Advanced Push Notifications: rich push via Google FCM (free and unlimited), with images, topics, multicast, web push, and click tracking.
- Auto Skeleton Loader: shimmer placeholders that read your Bubble layout automatically and follow it when it changes.
- Observable Plot x D3 Charts & Maps: 33+ chart types from the D3.js creators, with built-in transforms, auto charts, maps, and export.