--- title: "Rocket Chat Block Elements Guide" slug: "block-elements" description: "Explore block elements in Rocket Chat. Create secure UI components for apps and collaboration features." updated: 2025-06-20T06:17:53Z published: 2025-06-20T06:17:53Z --- > ## Documentation Index > Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt > Use this file to discover all available pages before exploring further. # 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](/v1/docs/building-blocks#parameter-details). | ****Example of a**`button`**block element**** The following example shows the button types: ```json {    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'            },      },  ] }, ``` ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(122).png) --- ## 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: ```json {   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](/v1/docs/building-blocks#parameter-details). | ****Example of the**`overflow`**block element**** The following example shows an `overflow` menu inside a `section` block: ```json {        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: ```json {   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](/v1/docs/building-blocks#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: ```json {   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',     } } ``` ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(123).png) --- ## 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](/v1/docs/building-blocks#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: ```json {    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'                  },             }       ]     }] } ``` ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(124).png) --- ## 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](/v1/docs/building-blocks#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: ```json {   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' } ]} ``` ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(125).png)