Files
EVOLV/manuals/node-red/flowfuse-ui-button-manual.md
znetsixe 6a6c04d34b Migrate to new Gitea instance (gitea.wbd-rd.nl)
- Update all submodule URLs from gitea.centraal.wbd-rd.nl to gitea.wbd-rd.nl
- Add settler as proper submodule in .gitmodules
- Add agent skills, function anchors, decisions, and improvements
- Add Docker configuration and scripts
- Add manuals and third_party docs
- Update .gitignore with secrets and build artifacts
- Remove stale .tgz build artifact

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 21:07:04 +01:00

2.2 KiB

FlowFuse ui-button Manual (EVOLV Reference)

Source: https://dashboard.flowfuse.com/nodes/widgets/ui-button.html

Purpose

Clickable button that sends a message on user interaction.

Properties

Property Type Dynamic Notes
group ref No Parent ui-group
width int No Columns
height int No Row units
label string Yes Button text
icon string Yes Material Design icon name (no mdi- prefix)
iconPosition string Yes "left" or "right"
buttonColor string Yes Background color
textColor string Yes Label color (auto-calculated if omitted)
iconColor string Yes Icon color (matches text if omitted)
tooltip string No Hover tooltip
order int No Position in group
emulateClick bool No Trigger click on any received msg

Events

Event Enabled By Output
Click onclick: true msg.payload = configured value
Pointer Down onpointerdown: true msg.payload + msg._event with timestamp
Pointer Up onpointerup: true msg.payload + msg._event with timestamp

Hold duration = pointerup._event.timestamp - pointerdown._event.timestamp.

Input

msg.payload — sets button payload value. With emulateClick: true, any input msg triggers a click.

msg.enabledtrue / false to enable/disable the button.

Dynamic Properties (msg.ui_update)

msg.ui_update = {
  label: "Stop",
  icon: "stop",
  iconPosition: "left",
  buttonColor: "#f44336",
  textColor: "#ffffff",
  iconColor: "#ffffff",
  class: "my-btn-class"
};

EVOLV Key Rules

  1. Use buttons for operator actions (start/stop pump, acknowledge alarm).
  2. Set emulateClick: false (default) — don't auto-trigger on incoming messages.
  3. For toggle buttons, update label/color dynamically via msg.ui_update from downstream logic.
  4. Pair with confirmation dialog (ui-notification or ui-template) for destructive actions.
  5. Standard sizing: width: 2, height: 1 for inline; width: 4, height: 1 for full-width in 4-col group.