building-blocks.md

Building Blocks

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 */ } ,
}

{% hint style="info" %} Notice how the section block and the button element are used in the Contextual Bar app. {% endhint %}

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.