Building Blocks

Print
Dark
Light
PDF

Building Blocks

Print
Dark
Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

Here is the list of objects, block elements, and blocks you can use to create interactions for your apps.

Objects

Text object

Field	Type	Required?	Description
type	String	Yes	The type of text object that you want to add. The available values are `plain_text` and `mrkdwn`.
text	String	Yes	The actual text.
emoji	Boolean	No	Works with the `plain_text` type.

Example

{
  type: 'plain_text',
  text: 'lorem ipsum 🚀',
  emoji: true,
}

Option object

Field	Type	Required?	Description
text	Object	Yes	The text that is to be displayed on the menu. The value can either be `plain_text` or `mrkdwn`.
value	String	Yes	The actual value that the option represents.

Example

{
  value: 'option_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
}

Block elements

button

Field	Type	Required?	Description
type	String	Yes	The type of the block element, in this case,`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 value can either be `primary` or `danger`.
actionId	String	Yes	A unique identifier for an action made upon the element.

Example

{
  type: 'button',
  text: {
      type: 'plain_text',
      text: 'danger❗',
      emoji: true,
    },
  actionId: 'button_1_danger',
  style: 'danger',
}

image

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

{
  type: 'image',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
}

overflow menu

Field	Type	Required?	Description
type	String	Yes	The type of the block element, in this case, `overflow`.
options	Array	Yes	An array with the possible options (the `options` object).
actionId	String	Yes	A unique identifier for an action made upon the element.

Example

{
  type: 'overflow',
  actionId: 'overflow_1',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
}

plain text input

Field	Type	Required?	Description
type	String	Yes	The type of the block element, in this case, `plain_text_input`.
actionId	String	Yes	A unique identifier for an action made upon the element.
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

{
  type: 'plain_text_input',
  actionId: 'plain_text_input_1',
  placeholder: {
      type: 'plain_text',
      text: 'Enter name',
      emoji: true,
    },
  initialValue: 'John Doe',
  multiline: false,
}

static select menu

Field	Type	Required?	Description
type	String	Yes	The type of the block element, in this case, `static_select`.
actionId	String	Yes	A unique identifier for an action made upon the element.
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

{
  type: 'static_select',
  actionId: 'overflow_1',
  initialValue: 'option_2',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

multi-static select menu

Field	Type	Required?	Description
type	String	Yes	The type of the block element, in this case, `multi_static_select`.
actionId	String	Yes	A unique identifier for an action made upon the element.
placeholder	Object	Yes	A placeholder text for the input (`plain text` object).
initialValue	Array of strings	No	The initial values selected (`value` field from the `options` object).
options	Array	Yes	An array with the possible options (the `options` object).

Example

{
  type: 'multi_static_select',
  actionId: 'overflow_1',
  initialValue: ['option_1' ,'option_2'],
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

Blocks

section

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `section`.
text	Object	Yes	The text that is to be displayed on the button. The value can either be `plain_text` or `mrkdwn`.
accessory	Object	No	One element that can be a `button element`, an `image element`, or an `overflow menu`.

Example

{
  type: 'section',
  blockId: 'section_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
  accessory: { /* one of the accessory elements */ } ,
}

Notice how the section block and the button element are used in the contextual bar app.

divider

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `divider`.

Example

{
  type: 'divider',
  blockId: 'divider_1',
}

image

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `image`.
imageUrl	String	Yes	The URL of the image.
altText	String	Yes	A text describing the image being displayed.
title	Object	No	The text to be displayed as the image's title. The value can either be `plain_text` or `mrkdwn`.

Example

{
  type: 'image',
  blockId: 'image_1',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
  title: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
}

actions

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `actions`.
elements	Array	Yes	A list of interactive block elements.

Example

{
  type: 'actions',
  blockId: 'actions_1',
  elements: [ /* block elements */ ]
}

context

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `context`.
elements	Array	Yes	A list of block elements. Allowed elements are `plain text object` and `image element`.

Example

{
  type: 'context',
  blockId: 'context_1',
  elements: [ /* block elements */ ]
}

input

Field	Type	Required?	Description
blockId	String	No	A unique identifier for the block.
type	String	Yes	The type of the block, in this case, `input`.
element	Array	Yes	The input element, that can be `plain text input`, `static select menu`, and `multi static select menu`.

Example

{
  type: 'input',
  blockId: 'input_1',
  element: { /* input element */ }
}

Now that we've seen the different building blocks that can be used for our apps, let's take a look at how to use action buttons to initiate a set of actions in the next section.

Was this article helpful?

What's Next

Building Blocks

On this page

Objects
Block elements
Blocks