button

Overview

The button node adds interactive buttons to your dashboard. Trigger flows manually, control devices, reset values, or navigate between pages. Supports icons, custom colors, and confirmation dialogs.

Properties

Button Styles

// Button configurations
{ "bgcolor": "#22c55e" }  // Green
{ "bgcolor": "#3b82f6" }  // Blue
{ "bgcolor": "#ef4444" }  // Red
{ "bgcolor": "linear-gradient(to right, #8b5cf6, #ec4899)" }  // Gradient

Example: Device Control Panel

Create buttons to control smart devices.

// Button node: "Light ON"
{
  "label": "Light ON",
  "icon": "lightbulb",
  "bgcolor": "#22c55e",
  "payload": { "device": "light_01", "state": "on" },
  "topic": "device/control"
}

// Button node: "Light OFF"
{
  "label": "Light OFF",
  "icon": "lightbulb_outline",
  "bgcolor": "#6b7280",
  "payload": { "device": "light_01", "state": "off" },
  "topic": "device/control"
}

// Button node: "Emergency Stop"
{
  "label": "EMERGENCY STOP",
  "icon": "warning",
  "bgcolor": "#ef4444",
  "payload": "emergency_stop",
  "confirm": "Are you sure you want to trigger emergency stop?"
}

Dynamic Button Updates

Update button appearance dynamically with msg.ui_control.

// Function node: Update button based on state
var isOn = msg.payload.state === "on";

msg.ui_control = {
    "label": isOn ? "Turn OFF" : "Turn ON",
    "icon": isOn ? "toggle_on" : "toggle_off",
    "bgcolor": isOn ? "#22c55e" : "#6b7280"
};

return msg;

// Disable button:
msg.ui_control = { "disabled": true };

// Enable button:
msg.ui_control = { "disabled": false };

Common Icons