🛠 Icon Toggle Multi‑State — Setup Guide Follow these steps to quickly integrate and fully customize your multi‑state toggle in Bubble.

📍 Step 1 — Installation & Basic Setup
Install the plugin.

Drag the IconToggleMultiState element onto your page.

In the properties panel, configure your states:

Source Type: Select Icon or Image.

State Names: Comma‑separated list of state names (e.g., Play,Pause,Stop).

Icon / Image Lists: Provide matching icon names or image URLs.

⚠ Important: All lists (State Names, Icon Names, Icon Colors, etc.) must have the same number of items.

🔗 Step 2 — Real‑time Database Sync
Keep your UI always in sync with your database.

In the element's properties, set:

Initial State Name → Link to a text field in your database (e.g., Parent group's thing's status).

Create a workflow:

Event: When an IconToggleMultiState's state is changed.

Action: Make changes to a thing....

Thing to change: The database item storing the state (e.g., Parent group's thing).

Field to modify: The text field from Step 1 → This IconToggleMultiState's current_state.

Result:
The icon always reflects the database value, and clicking it updates the value for all users in real‑time.

⚪ Step 3 — Handling Null States
Gracefully manage empty or undefined values in your database.

Enable Null State: Check [x] Allow Null State.

Customize Null Appearance:

Icons: Set Null Icon Name, Null Icon Color, etc.

Images: Upload a Null Image URL.

Optional — Include Null in Click Cycle:

Check [x] Include Null in Cycle → Allows users to click into the null state (clearing the DB field).

Leave unchecked if null should only appear as an initial/external state.

🎨 Step 4 — Customization & Controls
Disabled State:

Check [x] Disabled to prevent clicks.

Set a Disabled Icon Color for visual feedback.

Appearance Tweaks:

Adjust Icon Size, Image Size, and Fade Duration to fit your app’s design.

✅ Done!
You now have a powerful, fully integrated, and customizable multi‑state toggle for your Bubble app.
Use it to simplify workflows, enhance interactivity, and deliver a better user experience.

TEST PAGE: https://pluginslureconsultoria.bubbleapps.io/version-test/multistate