# 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.enabled` — `true` / `false` to enable/disable the button.

## Dynamic Properties (`msg.ui_update`)

```js
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.