Advanced Button

A push button with richer visuals: icons and three style variants. Same events as Simple Button — use it when a button has to look like more than a label.

[image] Advanced Button on canvas, Filled style, icon on the left

What it does

Same event model as Simple Button — Momentary or Toggle, with WHEN_PRESSED, WHEN_RELEASED, WHEN_LONG_PRESSED, WHEN_TOGGLED(isOn). On top of that, you get:

• Three styles — Filled, Outlined, Text.
• Icons — A glyph at the left or right of the label, with a different icon per state if you want.

When to use it

• Primary CTA with icon — Filled style, an icon at left, the label Publish.
• Status-aware toggle — Toggle mode, change the icon and content color per state. Use WHEN_TOGGLED(isOn) to mirror the state on a relay.

Properties

The Inspector opens as a bottom sheet with a Widget ID field at the top, then these sections in order.

Widget ID

1. Essential

2. Header

3. Button labels

4. Icons

5. Colors · Default

6. Colors · Pressed

7. Colors · Long press

Momentary mode only.

States and behavior

[image] Three styles side by side — Filled, Outlined, Text

States are the same as Simple Button: Idle, Pressed, Long-pressed (Momentary only). The icon, label, and colors swap per state independently.

In Arduino code

The button mirrors what the user does on the dashboard. To react to it in your sketch:

IAdvancedButton("publish_btn") {
  WHEN_PRESSED {
    startUpload();
  }
};

That’s the minimum — one event block, one widget mirrored. The macro is identical in shape to ISimpleButton. See InstantIoT Library / Receive Command from App for the full event reference.

Working Arduino code example

A complete sketch you can flash. The Widget ID publish_btn matches the one you set on your Advanced Button in the app.

[gif] Advanced Button with icon on the dashboard triggering an action on the ESP32

Direct Mode

Your phone connects directly to the ESP32’s SoftAP — no router, no server. Best for prototyping and standalone setups.

#include <InstantIoTWiFiAP.hpp>

const char* AP_SSID = "InstantIoT-Greenhouse";
const char* AP_PASS = "12345678";

#define LED_PIN 2

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);

IAdvancedButton("publish_btn") {
  WHEN_PRESSED {
    digitalWrite(LED_PIN, HIGH);
  }
  WHEN_RELEASED {
    digitalWrite(LED_PIN, LOW);
  }
};

void setup() {
  pinMode(LED_PIN, OUTPUT);
  instant.begin();
}

void loop() {
  instant.loop();
}

Server Mode

The ESP32 connects to your self-hosted InstantIoT Server over WiFi. Multiple devices, persistent state, history.

#include <InstantIoTWiFiServer.hpp>

const char*    WIFI_SSID     = "YOUR_WIFI_SSID";
const char*    WIFI_PASS     = "YOUR_WIFI_PASSWORD";
const char*    SERVER_IP     = "192.168.1.42";
const uint16_t SERVER_PORT   = 9001;
const char*    DEVICE_TOKEN  = "YOUR_DEVICE_TOKEN";

#define LED_PIN 2

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);

IAdvancedButton("publish_btn") {
  WHEN_PRESSED {
    digitalWrite(LED_PIN, HIGH);
  }
  WHEN_RELEASED {
    digitalWrite(LED_PIN, LOW);
  }
};

void setup() {
  pinMode(LED_PIN, OUTPUT);
  instant.begin(WIFI_SSID, WIFI_PASS);
}

void loop() {
  instant.loop();
}

The widget code is identical — only the include and constructor change.

Notes

• All conditional fields (Long press, Icons, Long press icon, Colors · Long press) auto-hide based on Mode and Position.

Next

→ Simple Button — Same events, plain look.

→ Emergency Button — Stricter trigger filters for safety-critical actions.

→ Switch — When the action is a persistent on/off rather than a button press.