Button widget

The button widget enables users to make a selection and send a response back to the agent.

Example

Properties

Property

Description

 Default value

Data type

actionType

Button action when user clicks, which is one of: cancel | reset | submit.

 submit

enum

align

Position of the inline style button relative to the parent container, which is one of: left | right | center.

 center

enum

context

See Context properties.

  

string (JSON)

event

Name of event that fires when a user clicks the button, in the format: "event": { "name": "onlogin" }.

  

string (JSON)

id

Unique identifier of this widget.

  

string

setFocus

Indicates whether the engine sets focus to this widget. Default is false.

If set to true, the engine sets focus to the first button when the rich-media widget is presented to the user. This is useful for accessibility and usability, when the user is presented with multiple buttons and must click one.

 false

Boolean

size

Button size, which is either: small | large .

small

enum

style

Button style, which is one of: block | inline | outline | outline-block:

  • block: Button occupies the entire width. For example, if an item has multiple buttons, then each button occupies the entire width of the row, and the buttons are not displayed side by side.

  • inline Button occupies the minimum required width. Multiple buttons are displayed side by side, if space permits.

  • outline Button occupies the minimum required width. Multiple buttons are displayed side by side, if space permits. Button is displayed as a border only with blank fill.

  • outline-block: Button occupies the entire width. Button is displayed as a border only with blank fill.For example, if an item has multiple buttons, then each button occupies the entire width of the row, and the buttons are not displayed side by side.

outline- block

enum

text

Text displayed on the button.

  

string
type Rich-media type, which is always Button. string  

Context properties

Context property

Description

Data type

border

Button border color as a hex color code.

string (hex color code)

borderRadius

Button border radius.

number

borderWidth

Button border width.

number

color

Accepts either:

  • one of the following values: primary|secondary|success|danger|warning| info|light|dark|link

  • a JSON string, where primary and secondary colors are specified with the color context property as a hex color code

either enum or string (JSON with hex color code)

textColor

Text color as a hex color code.

string (hex color code)

Samples

Contextual buttons

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Button",
                    "id": "button0",
                    "context": "primary | secondary | success | danger |
                    warning | info | light | dark | link",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                }
            }
        }
    ]
}

Outline contextual buttons

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Button",
                    "id": "button0",
                    "context": "primary | secondary | success | danger |
                    warning | info | light | dark | link",
                    "style": "outline",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                }
            }
        }
    ]
}

Buttons with adjusting button size

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Button",
                    "id": "button0",
                    "context": "primary | secondary | success | danger |
                    warning | info | light | dark | link",
                    "size": "large | small",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },

                "1": {
                    "type": "Button",
                    "id": "button1",
                    "context": "secondary",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },

                "2": {
                    "type": "Button",
                    "id": "button2",
                    "context": "success",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "3": {
                    "type": "Button",
                    "id": "button3",
                    "context": "danger",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "4": {
                    "type": "Button",
                    "id": "button4",
                    "context": "warning",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "5": {
                    "type": "Button",
                    "id": "button5",
                    "context": "info",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "6": {
                    "type": "Button",
                    "id": "button6",
                    "context": "light",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "7": {
                    "type": "Button",
                    "id": "button7",
                    "context": "dark",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "8": {
                    "type": "Button",
                    "id": "button8",
                    "context": "link",
                    "size": "large",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                }
            }
        }
    ]
}

Block buttons

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Button",
                    "id": "button0",
                    "context": "primary | secondary | success | danger |
                    warning | info | light | dark | link",
                    "size": "large | small",
                    "style": "block | outline | outline-block",
                    "text": "login",
                    "event": {
                        "name": "onlogin"
                    }
                },
                "1": {
                    "type": "Button",
                    "id": "button1",
                    "context": "secondary",
                    "size": "small",
                    "text": "login",
                    "style": "outline-block",
                    "event": {
                        "name": "onlogin"
                    }
                }
            }
        }
    ]
}

Two inline buttons side by side

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": [{
                        "type": "Button",
                        "id": "button0",
                        "context": "primary | secondary | success | danger |
                        warning | info | light | dark | link",
                        "size": "small",
                        "text": "login",
                        "event": {
                            "name": "onlogin"
                        }
                    }, {
                        "type": "Button",
                        "id": "button1",
                        "context": "primary | secondary | success | danger |
                        warning | info | light | dark | link",
                        "size": "small",
                        "text": "logout",
                        "event": {
                            "name": "onlogout"
                        }
                    }
                ]
            }
        }
    ]
}
var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": [{
                        "type": "Button",
                        "id": "button0",
                        "context": "primary",
                        "size": "small",
                        "text": "login",
                        "align": "left",
                        "event": {
                            "name": "onlogin"
                        }
                    }, {
                        "type": "Button",
                        "id": "button1",
                        "context": "primary",
                        "size": "small",
                        "align": "right",
                        "text": "logout",
                        "event": {
                            "name": "onlogout"
                        }
                    }
                ]
            }
        }
    ]
}
var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Paragraph",
                    "text": "Inline button rendered in a different format when button container properties are present."
                },
                "1": {
                    "containerAlign": "alignParentBottom",
                    "containerSeparator": "#d3d3d3",
                    "items": [{
                            "type": "Button",
                            "id": "button1",
                            "context": "primary",
                            "align": "right",
                            "text": "OK",
                            "event": {
                                "name": "onOk"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Paragraph",
                    "text": "Inline button rendered in a different format when button container properties are present."
                },
                "1": {
                    "containerAlign": "alignParentBottom",
                    "containerSeparator": "#d3d3d3",
                    "items": [{
                            "type": "Button",
                            "id": "button1",
                            "context": "primary",
                            "align": "left",
                            "text": "OK",
                            "event": {
                                "name": "onOk"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Paragraph",
                    "text": "Inline button rendered in a different format when button container properties are present."
                },
                "1": {
                    "containerAlign": "alignParentBottom",
                    "containerSeparator": "#d3d3d3",
                    "items": [{
                            "type": "Button",
                            "id": "button1",
                            "context": "primary",
                            "text": "OK",
                            "event": {
                                "name": "onOk"
                            }
                        }, {
                            "type": "Button",
                            "id": "button2",
                            "context": "danger",
                            "text": "Cancel",
                            "event": {
                                "name": "onCancel"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

Two sample block buttons

var obj = {
    "widgetType": "options",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": [{
                        "type": "Button",
                        "id": "button0",
                        "context": "primary | secondary | success | danger |
                        warning | info | light | dark | link",
                        "size": "small",
                        "text": "login",
                        "style": "block",
                        "event": {
                            "name": "onlogin"
                        }
                    }, {
                        "type": "Button",
                        "id": "button1",
                        "context": "primary | secondary | success | danger |
                        warning | info | light | dark | link",
                        "size": "small",
                        "text": "logout",
                        "style": "block",
                        "event": {
                            "name": "onlogout"
                        }
                    }
                ]
            }
        }
    ]
}