Button
The primary way an operator does something. On its own a button does nothing — attach event actions to its click event.
Reach for it when you need:
- Start/stop commands
- Navigating to a detail view
- Running a Gateway script
Component name: Button · Category: Input
In the palette: Clickable button
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
label | string | Click Me | — |
variant | enum | primary | Options: primary · secondary · outline · ghost. |
iconOnly | boolean | false | Hide the label and shrink the button to the icon (keeps the chosen variant color) |
color | color | "" | Button background color (overrides the variant; still overridable via the inline Style editor) |
hover | object | {"background":"","color":"","fontSize":0} | Hover overrides (each value is validated): background color, text color, and font size (px). |
iconOptions | object | {"icon":"","size":16,"position":"left","color":"","gap":8} | Icon: name, size, position, color, and gap to the label |
disabled | boolean | false | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Confirm consequential actions. A button that starts equipment should ask first, and the tag it writes should carry a write level — hiding the button is usability, not a control.