Block Elements

Block elements are components that you can add to the blocks to enhance user interaction.

button

A button is an interactive block element used to perform a specific action.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: section, actions

Field	Type	Required?	Description
`type`	String	Yes	The type of the block element, in this case, the value is `button`.
`text`	Object{}	Yes	The text that is to be displayed on the menu. The value can either be `plain_text` or `mrkdwn`.
`value`	String	No	A value sent along with the button information when an action is made upon the element.
`url`	String	No	A URL that the button points to.
`style`	String	No	The style of the button. The options are: `primary` `secondary` `danger` `success` `warning` If you don’t provide any value for the button style, by default, the button displays `Show more…`
`actionId`, `appId`, `blockId`	String	Yes	See Parameter details.

Example of a button block element

The following example shows the button types:

{
    type: 'actions',
    elements: [
    {
        type: 'button',
        actionId: 'button_action_1',
        appId: appId,
        blockId: 'button_action_block_1',
        text: {
             type: 'plain_text',
             text: 'Primary'
          },
        style: 'primary',
     },
     {
        type: 'button',
        actionId: 'button_action_2',
        appId: appId,
        blockId: 'button_action_block_2',
        text: {
             type: 'plain_text',
             text: 'Danger'
          },
        style: 'danger',
      },
      {
        type: 'button',
        actionId: 'button_action_3',
        appId: appId,
        blockId: 'button_action_block_3',
        text: {
             type: 'plain_text',
             text: 'Secondary'
          },
        style: 'secondary',
      },
      {
        type: 'button',
        actionId: 'button_action_4',
        appId: appId,
        blockId: 'button_action_block_4',
        text: {
             type: 'plain_text',
             text: 'Success'
           },
         style: 'success',
       },
       {
         type: 'button',
         actionId: 'button_action_5',
         appId: appId,
         blockId: 'button_action_block_5',
         text: {
              type: 'plain_text',
              text: 'Warning'
            },
         style: 'warning',
         },
         {
          type: 'button',
          actionId: 'button_action_6',
          appId: appId,
          blockId: 'button_action_block_6',
          text: {
               type: 'plain_text',
               text: 'Default'
            },
      },
  ]
},

image

Images can be added as blocks and block elements.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: section, context

Field	Type	Required?	Description
`type`	String	Yes	The type of the block element, in this case, `image`.
`imageUrl`	String	Yes	The URL of the image.
`altText`	String	Yes	The text describing the image being displayed.

Example of the image block element

The following code snippet shows an example of an image block element inside a section block:

{
   type: 'section',
   accessory: {
       type: 'image',
       imageUrl: 'https://img.freepik.com/free-vector/rocket-background-flat-style_23-2147904992.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1726444800&semt=ais_hybrid',
       altText: 'An icon of a rocket'
    }
}

overflow menu

An overflow menu is displayed in a clickable kebab menu. This element can be used when you want a compact layout or to provide additional options.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: The overflow block element can be used in the section and actions blocks.

Field	Type	Required?	Description
`type`	String	Yes	The type of the block element, in this case, `overflow`.
`options`	Array[{}]	Yes	An array with the options (the `options` object).
`actionId`, `appId`, `blockId`	String	Yes	See Parameter details.

Example of the overflow block element

The following example shows an overflow menu inside a section block:

{
        type: 'section',
        accessory: {
          type: 'overflow',
          actionId: 'overflow_action_1',
          appId: appId,
          blockId: 'overflow_block_1',
          options: [
            {
              value: 'option_1',
              text: {
                type: 'plain_text',
                text: 'Option 1'
              }
            },
            {
              value: 'option_2',
              text: {
                type: 'plain_text',
                text: 'Option 2'
              }
            }
          ]
        }
      }

The following example shows the overflow element inside an action block:

{
   type: 'actions',
   elements: [
     {
       type: 'overflow',
       appId: appId,
       actionId: 'overflow_action_1',
       blockId: 'overflow_block_1',
       options: [
          {
            value: 'option_1',
            text: {
                    type: 'plain_text',
                    text: 'Option 1'
                  }
           },
           {
            value: 'option_2',
            text: {
                    type: 'plain_text',
                    text: 'Option 2'
           }
     }]
 }]
}

plain text input

This element can be used to allow users to enter some information.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: input

Field	Type	Required?	Description
`type`	String	Yes	The type of the block element, in this case, `plain_text_input`.
`actionId`, `appId`, `blockId`	String	Yes	See Parameter details.
`placeholder`	Object{}	Yes	A placeholder text for the input (`plain text` object).
`initialValue`	String	No	The initial value of the field.
`multiline`	Boolean	No	A flag that indicates whether the field should be a single line (default) or a larger text area.

Example of a plain_text_input block element

The following example shows the text input element:

{
   type: 'input',
   label: {
         type: 'plain_text',
         text: 'Plain text input'
     },
   element: {
         type: 'plain_text_input',
         appId: appId,
         blockId: 'text_input_block',
         actionId: 'text_input_action',
     }
}

static select menu

In a static select menu, you need to define a set of options that a user can choose from.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: section, actions

Field	Type	Required?	Description
`type`	String	Yes	The type of the block element, in this case, `static_select`.
`actionId`, `appId`, `blockId`	String	Yes	See Parameter details.
`placeholder`	Object{}	Yes	A placeholder text for the input (`plain text` object).
`initialValue`	String	No	The initial value selected (`value` field from the `options` object).
`options`	Array[{}]	Yes	An array with the possible options (the `options` object).

Example of a static_select block element

The following example shows a static menu:

{
    type: 'actions',
    elements: [
      {
         type: 'static_select',
         appId: appId,
         blockId: 'select_block',
         actionId: 'select_action',
         placeholder: {
              type: 'plain_text',
              text: 'Select an option'
       },
         options: [
           {
              value: 'option_1',
              text: {
                       type: 'plain_text',
                       text: 'Option 1'
                     },
                },
           {
              value: 'option_2',
              text: {
                        type: 'plain_text',
                        text: 'Option 2'
                  },
             }
       ]
     }]
}

radio button

Like the static select element, radio buttons are also used to select options from a pre-defined list.

Supported surfaces: Messages, contextual bars, modals

Compatible blocks: actions

Field	Type	Required?	Description
`actionId`, `appId`, `blockId`	String	Yes	See Parameter details.
`type`	String	Yes	The type of the block element, in this case, `radio_button`
`options`	Array[{}]	Yes	The options for the radio buttons in text objects.

Example of a radio_button block element

The following example shows a radio button element with two options:

{
   type: 'radio_button',
   actionId: 'radio_button_action_1',
   appId: appId,
   blockId: 'radio_button_action_block_1',
   options: [{
       text: {
           type: 'plain_text',
           text: 'Option 1' },
       value: 'option_1' },
    {
       text: {
            type: 'plain_text',
            text: 'Option 2' },
       value: 'option_2' }
]}