Button
This is a generic button widget, used to trigger an action pipeline when clicked. In its simplest form it is very similar to a text widget, but has some additional behavior to provide visual feedback when it is clicked.
Model
{
"type": "button",
"label": "Click me",
"icon": {
"icon": "☑️",
"alignment": "leading"
},
"actions": {
"onClick": {
"type": "notify",
"title": "Button was clicked"
}
},
"disabled": false,
"options": {
"style": {
"fontSize": "20px",
"fontWeight": "bold"
}
}
}
Field | Description |
---|---|
|
Set to true to grey out the button and ignore click actions. Default is false |
|
Optional button icon. |
|
Optional label text. The label can be assigned a string value or it can be a composite property allowing the text and style to be configured. To apply label specific styling, the property value is declared as follows:
The configuration of the button icon and label follow the same logic as the |
Actions
Supported action hooks:
-
onClick
: triggers when a user clicks anywhere on the button. Note that the action pipeline is executed on the release of the mouse button rather than on the "mouse-down" event. If the mouse pointer is moved outside the widget before the button is released, theonClick
action is not triggered. The messagepayload
is initialized to thelabel
text.
Example opening a link:
{
"type": "button",
"label": "Click here",
"actions": {
"onClick": {
"type": "openLink",
"message": {
"payload": {
"url": "https://www.lipsum.com"
}
}
}
}
}