Button

    This component renders a button. When the user taps a button, a specified action is performed.

    API Type

    Server API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request

    Parameter Type Required Description
    type string Y Set this parameter to button.
    action string Y Action performed when this button is tapped. Specify an action object.
    flex number N The ratio of the width or height of this component within the parent box. For more information, see Width and height of components in “How to Place Components and Adjust Child Components.”
    margin string N Minimum space between this component and the previous component in the parent element. For more information, see margin property of the component in “How to Place Components and Adjust Child Components.”
    position string N Reference for offsetTop, offsetBottom, offsetStart, and offsetEnd. Specify one of the following values:

    relative : Use the previous box as reference.
    absolute : Use the top left of parent element as reference.

    The default value is relative. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetTop string N The top offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetBottom string N The bottom offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetStart string N The left offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetEnd string N The right offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    height string N Height of the button. You can specify sm or md. The default value is md.
    style string N Style of the button. Specify one of the following values:

    primary : Style for dark color buttons
    secondary : Style for light color buttons
    link : HTML link style

    The default value is link.
    color string N Character color when the style property is link.
    Background color when the style property is primary or secondary.
    Use a hexadecimal color code.
    gravity string N Alignment style in vertical direction. For more information, see Alignment in vertical direction in “How to Place Components and Adjust Child Components.”

    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"
            }
          }
        ]
      }
    }