Hold-to-confirm button plus 8 toggle styles with juicy animations and satisfying user feedback. Customizable colors, sizes, roundness, labels, icons. For native mobile, web and wrapped apps. WCAG-accessible, mobile-safe.

Toggle Studio & Hold gives you 9 switch styles in a single element, including a true hold-to-confirm toggle for critical actions (delete, deploy, send…). Every color, size, label, icon, and timing parameter is a regular Bubble field.

Quick Start

1. Drag a Toggle Studio element onto your page and resize the canvas. The toggle centers itself inside.
2. Pick a Style from the dropdown (start with Classic), set the On color and Off color to match your brand.

The toggle is now live in your preview. Clicking it flips its state on its own; no workflow is required.

Read the state in a workflow

The toggle exposes two states:

• is_on (yes/no): yes when ON, no when OFF.
• state_text (text): "on" or "off", useful for display.

Example, a Group visible only when the toggle is ON: set the Group's Conditional to When Toggle Studio's is_on is "yes".

Example, displaying the state: a Text element with content Notifications are Toggle Studio's state_text renders as Notifications are on.

React to a state change

The toggle fires three events:

• Changed: fires on every state change, whatever caused it.
• Switched on: fires only when the state changes to ON.
• Switched off: fires only when the state changes to OFF.

Example: When Toggle Studio's Switched on, Send email.