Button

This component renders a button. If a button is tapped, a specified action is performed.

Request {#button-request-parameter}

ParameterTypeRequiredDescription
typestringYSet this parameter to button.
actionstringYThe action that occurs when the button is tapped. Specify an action object.
flexnumberNThe proportion of the width or height of the component within the parent component. For more information, see Width and height of components.
marginstringNThe minimum space between the component and the previous component in the parent component. For more information, see margin.
positionstringNThe reference point for the offsetTop, offsetBottom, offsetStart, and offsetEnd properties. Specify one of the following values:

• relative: Uses the previous box as the reference point.
• absolute: Uses the upper left corner of the parent component as the reference point.

The default value is relative. For more information, see Offset.
offsetTopstringNTop offset. For more information, see Offset.
offsetBottomstringNBottom offset. For more information, see Offset.
offsetStartstringNLeft offset. For more information, see Offset.
offsetEndstringNRight offset. For more information, see Offset.
heightstringNButton height. Specify either sm or md. The default value is md.
stylestringNButton style. Specify one of the following values.

• primary: Button style in a darker color
• secondary: Button style in a lighter color
• link: HTML link style.

The default value is link.
colorstringNThe text color of the button when the style property is link.
The background color of the button when the style property is primary or secondary.
Set a hex color code.
gravitystringNVertical alignment. For more information, see Vertical alignment.

Request example {#button-request-example}

{  "type": "bubble",  "body": {    "type": "box",    "layout": "vertical",    "spacing": "md",    "contents": [      {        "type": "button",        "style": "primary",        "action": {          "type": "uri",          "label": "Primary style button",          "uri": "http://worksmobile.com"        }      },      {        "type": "button",        "style": "secondary",        "action": {          "type": "uri",          "label": "Secondary style button",          "uri": "http://worksmobile.com"        }      },      {        "type": "button",        "style": "link",        "action": {          "type": "uri",          "label": "Link style button",          "uri": "http://worksmobile.com"        }      }    ]  }}