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

disable

Set to true to grey out the button and ignore click actions. Default is false

icon

Optional button icon.

label

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:

{
    "label": {
        "text": "Click me",
        "style": {
            "color": "white"
        },
        "styleByTheme": {
             "light": {
                "color": "blue"
            }
        }
    }
}

The configuration of the button icon and label follow the same logic as the dragPreview with "icon-label" type selected.

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, the onClick action is not triggered. The message payload is initialized to the label text.

Example opening a link:

{
    "type": "button",
    "label": "Click here",
    "actions": {
        "onClick": {
            "type": "openLink",
            "message": {
                "payload": {
                    "url": "https://www.lipsum.com"
                }
            }
        }
    }
}