Files
EVOLV/wiki/manuals/node-red/flowfuse-ui-button-manual.md
znetsixe 48f790d123
Some checks failed
CI / lint-and-test (push) Has been cancelled
chore: clean up superproject structure
Move content to correct locations:
- AGENTS.md → .agents/AGENTS.md (with orchestrator reference update)
- third_party/docs/ (8 reference docs) → wiki/concepts/
- manuals/ (12 Node-RED docs) → wiki/manuals/

Delete 23 unreferenced one-off scripts from scripts/ (keeping 5 active).
Delete stale Dockerfile.e2e, docker-compose.e2e.yml, test/e2e/.
Remove empty third_party/ directory.

Root is now: README, CLAUDE.md, LICENSE, package.json, Makefile,
Dockerfile, docker-compose.yml, docker/, scripts/ (5), nodes/, wiki/,
plus dotfiles (.agents, .claude, .gitea).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 18:01:04 +02: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.