Files
EVOLV/wiki/manuals/node-red/flowfuse-ui-button-manual.md
znetsixe 5ae8788fd7 wiki: crisp overhaul — no decoration emoji, all 9 master pages refactored
Source-tree mirror of EVOLV.wiki.git refactor (27a42ee on wiki.git):

- 7 master pages rewritten with clean design (Home, Architecture,
  Topology-Patterns, Topic-Conventions, Telemetry, Getting-Started,
  Glossary). Tables and Mermaid for visuals, gitea alert callouts for
  warnings, shields badges for metadata only. No emoji as decoration.
- Archive.md becomes a removal-changelog pointing readers to git
  history and to the successor pages.
- _Sidebar.md updated to navigate the new flat-name layout.
- Concept / finding / manual pages: uniform mini-header (badges +
  "reference page" callout) added without rewriting domain content.
- Every internal link now uses the flat naming that resolves on the
  live gitea wiki (Concept-ASM-Models, Finding-BEP-..., etc.).

On wiki.git: 29 Archive-* pages hard-deleted (the git history
preserves them; Archive.md documents the removal).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 22:24:51 +02:00

2.5 KiB

FlowFuse ui-button Manual (EVOLV Reference)

code-ref type

Note

Reference page. Maintained for context; not regenerated by code. See Home for current top-level navigation.

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.