Blocks are a series of components that can be combined to create visually rich and compellingly interactive messages.
Read our guide to building block layouts to learn where and how to use each of these components. You can include up to 50 blocks in each message, and 100 blocks in modals or Home tabs.
This page lists the JSON payloads that your app can use to generate each block. Select the block you'd like to build:
Block type | Available in surfaces | Compatible block elements |
---|---|---|
Actions block | Modals Home tabs | Many. See below. |
Context block | Modals Home tabs | Image |
Divider block | Modals Home tabs | None. |
File block | None. | |
Header block | Modals Home tabs | None. |
Image block | Modals Home tabs | None. |
Input block | Modals Home tabs | Many. See below. |
Rich text block | Modals Home tabs | None. |
Section block | Modals Home tabs | Many. See below. |
Video block | Modals Home tabs | None. |
Holds multiple interactive elements.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | Button Checkboxes Date picker Datetime picker Multi-select menus Overflow menu Radio button Select menu Time Picker Workflow buttons |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For an actions block, type is always actions . |
Yes |
elements |
Object[] | An array of interactive element objects - buttons, select menus, overflow menus, or date pickers. There is a maximum of 25 elements in each action block. | Yes |
block_id |
String | A string acting as a unique identifier for a block. If not specified, a block_id will be generated. You can use this block_id when you receive an interaction payload to identify the source of the action. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
An actions block with a select menu and a button:
{
"type": "actions",
"block_id": "actions1",
"elements": [
{
"type": "static_select",
"placeholder":{
"type": "plain_text",
"text": "Which witch is the witchiest witch?"
},
"action_id": "select_2",
"options": [
{
"text": {
"type": "plain_text",
"text": "Matilda"
},
"value": "matilda"
},
{
"text": {
"type": "plain_text",
"text": "Glinda"
},
"value": "glinda"
},
{
"text": {
"type": "plain_text",
"text": "Granny Weatherwax"
},
"value": "grannyWeatherwax"
},
{
"text": {
"type": "plain_text",
"text": "Hermione"
},
"value": "hermione"
}
]
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Cancel"
},
"value": "cancel",
"action_id": "button_1"
}
]
}
View this block in Block Kit Builder
An actions block with a datepicker, an overflow, and a button:
{
"type": "actions",
"block_id": "actionblock789",
"elements": [
{
"type": "datepicker",
"action_id": "datepicker123",
"initial_date": "1990-04-28",
"placeholder": {
"type": "plain_text",
"text": "Select a date"
}
},
{
"type": "overflow",
"options": [
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-1"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-2"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-3"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-4"
}
],
"action_id": "overflow"
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Click Me"
},
"value": "click_me_123",
"action_id": "button"
}
]
}
Displays contextual info, which can include both images and text.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | Image |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For a context block, type is always context . |
Yes |
elements |
Object[] | An array of image elements and text objects. Maximum number of items is 10. | Yes |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://image.freepik.com/free-photo/red-drawing-pin_1156-445.jpg",
"alt_text": "images"
},
{
"type": "mrkdwn",
"text": "Location: **Dogpatch**"
}
]
}
Visually separates pieces of info inside of a message.
A content divider, like an <hr>
, to split up different blocks inside of a message. The divider block is nice and neat, requiring only a type
.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | None |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For a divider block, type is always divider . |
Yes |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
{
"type": "divider"
}
Displays a remote file.
You can't add this block to app surfaces directly, but it will show up when retrieving messages that contain remote files.
If you want to add remote files to messages, follow our guide.
Available in surfaces | Compatible block elements |
---|---|
None |
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For a file block, type is always file . |
Yes |
external_id |
String | The external unique ID for this file. | Yes |
source |
String | At the moment, source will always be remote for a remote file. |
Yes |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
{
"type": "file",
"external_id": "ABCD1",
"source": "remote",
}
Displays a larger-sized text block.
A header
is a plain-text block that displays in a larger, bold font. Use it to delineate between different groups of content in your app's surfaces.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | None |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For this block, type will always be header . |
Yes |
text |
Object | The text for the block, in the form of a plain_text text object. Maximum length for the text in this field is 150 characters. |
Yes |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
A header block:
{
"type": "header",
"text": {
"type": "plain_text",
"text": "Budget Performance"
}
}
Displays an image.
A simple image block, designed to make those cat photos really pop.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | None |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For an image block, type is always image . |
Yes |
image_url |
String | The URL of the image to be displayed. Maximum length for this field is 3000 characters. | Yes |
alt_text |
String | A plain-text summary of the image. This should not contain any markup. Maximum length for this field is 2000 characters. | Yes |
title |
Object | An optional title for the image in the form of a text object that can only be of type: plain_text . Maximum length for the text in this field is 2000 characters. |
No |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"block_id": "image4",
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
}
Collects information from users via block elements.
Read our guides to collecting input in modals or in Home tabs to learn how input blocks pass information to your app.
Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | Checkboxes Date picker Datetime picker Email Multi-select menus Number input Plain-text input Radio button Select menu Time Picker URL input |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For an input block, type is always input . |
Yes |
label |
Object | A label that appears above an input element in the form of a text object that must have type of plain_text . Maximum length for the text in this field is 2000 characters. |
Yes |
element |
Object | A block element. See above for full list. | Yes |
dispatch_action |
Boolean | A boolean that indicates whether or not the use of elements in this block should dispatch a block_actions payload. Defaults to false . |
No |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message or view and each iteration of a message or view. If a message or view is updated, use a new block_id . |
No |
hint |
Object | An optional hint that appears below an input element in a lighter grey. It must be a text object with a type of plain_text . Maximum length for the text in this field is 2000 characters. |
No |
optional |
Boolean | A boolean that indicates whether the input element may be empty when a user submits the modal. Defaults to false . |
No |
An input block containing a plain-text input element.
{
"type": "input",
"element": {
"type": "plain_text_input"
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}
Available in surfaces: Modals Home tabs
A rich_text
block is a formatted, structured representation of text. It is the output of the Slack client's WYSIWYG composer, so all messages sent by end-users will have this format. You can use this block to create your own formatted text in Block Kit Builder or include user-defined formatted text in your Block Kit payload. You might encounter rich_text
blocks in message payloads coming from our APIs, as a built-in type in the next-generation Slack platform, or as output of the rich_text_input
block.
A simple rich text block:
{
"type": "rich_text",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Hello there, I am a basic rich text block!"
}
]
}
]
}
Displays text, possibly alongside block elements.
A section
can be used as a simple text block, in combination with text fields, or side-by-side with certain block elements.
Available in Surfaces | Compatible block elements |
---|---|
Modals Home tabs | Button Checkboxes Date picker Image Multi-select menus Overflow menu Radio button Select menu Time Picker Workflow buttons |
Example:
Field | Type | Description | Required? |
---|---|---|---|
type |
String | The type of block. For a section block, type will always be section . |
Yes |
text |
Object | The text for the block, in the form of a text object. Minimum length for the text in this field is 1 and maximum length is 3000 characters. This field is not required if a valid array of fields objects is provided instead. |
Preferred |
block_id |
String | A string acting as a unique identifier for a block. If not specified, one will be generated. You can use this block_id when you receive an interaction payload to identify the source of the action. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
fields |
Object[] | Required if no text is provided. An array of text objects. Any text objects included with fields will be rendered in a compact format that allows for 2 columns of side-by-side text. Maximum number of items is 10. Maximum length for the text in each item is 2000 characters. Click here for an example. |
Maybe |
accessory |
Object | One of the compatible element objects. Be sure to confirm the desired element works with section . |
No |
A simple text section block:
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "A message *with some bold text* and _some italicized text_."
}
}
View this block in Block Kit Builder
A section block containing text fields:
{
"type": "section",
"text": {
"text": "A message *with some bold text* and _some italicized text_.",
"type": "mrkdwn"
},
"fields": [
{
"type": "mrkdwn",
"text": "High"
},
{
"type": "plain_text",
"emoji": true,
"text": "String"
}
]
}
View this block in Block Kit Builder
A section block containing a datepicker element:
{
"type": "section",
"text": {
"text": "*Sally* has requested you set the deadline for the Nano launch project",
"type": "mrkdwn"
},
"accessory": {
"type": "datepicker",
"action_id": "datepicker123",
"initial_date": "1990-04-28",
"placeholder": {
"type": "plain_text",
"text": "Select a date"
}
}
}
Displays an embedded video player.
A video
block is designed to embed videos in all app surfaces (e.g. link unfurls, messages, modals, App Home) — anywhere you can put blocks! To use the video block within your app, you must have the links.embed:write
scope.
The metadata received in the block payload will be used to construct the description, provider, and title of the video in all clients. Developers have the flexibility to leave non-mandatory fields null and use other blocks to format this content.
links.embed:write
scope for both user and bot tokens.video_url
has to be included in the unfurl domains specified in your app.video_url
should be publicly accessible, unless the app relies on information received from the Events API payloads to make a decision on whether the viewer(s) of the content should have access. If so, the service could create a unique URL accessible only via Slack.video_url
must be compatible with an embeddable iFrame.video_url
must return a 2xx code OR 3xx with less than 5 redirects and an eventual 2xx.video_url
must not point to any Slack-related domain.Available in surfaces | Compatible block elements |
---|---|
Modals Home tabs | None |
Example:
Property | Type | Description | Required? |
---|---|---|---|
type |
string | The type of block. For a video block, type will always be video . |
Yes |
alt_text |
string | A tooltip for the video. Required for accessibility | Yes |
author_name |
string | Author name to be displayed. Must be less than 50 characters. | No |
block_id |
string | A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id . |
No |
description |
Object | Description for video in the form of a text object that must have type of plain_text . |
Preferred |
provider_icon_url |
string | Icon for the video provider, e.g. YouTube icon. | No |
provider_name |
string | The originating application or domain of the video, e.g. YouTube. | No |
title |
Object | Video title in the form of a text object that must have type of plain_text . text within must be less than 200 characters. |
Yes |
title_url |
string | Hyperlink for the title text. Must correspond to the non-embeddable URL for the video. Must go to an HTTPS URL. | Preferred |
thumbnail_url |
string | The thumbnail image URL | Yes |
video_url |
string | The URL to be embedded. Must match any existing unfurl domains within the app and point to a HTTPS URL. | Yes |
An example video block payload:
{
"blocks": [
{
"type": "section",
"text": {
"type": "plain_text",
"text": "I think it's super cool",
"emoji": true
}
},
{
"type": "video",
"title": {
"type": "plain_text",
"text": "How to use Slack.",
"emoji": true
},
"title_url": "https://www.youtube.com/watch?v=RRxQQxiM7AA",
"description": {
"type": "plain_text",
"text": "Slack is a nifty way to communicate with your team.",
"emoji": true
},
"video_url": "https://www.youtube.com/embed/RRxQQxiM7AA?feature=oembed&autoplay=1",
"alt_text": "How to use Slack?",
"thumbnail_url": "https://i.ytimg.com/vi/RRxQQxiM7AA/hqdefault.jpg",
"author_name": "Arcado Buendia",
"provider_name": "YouTube",
"provider_icon_url": "https://a.slack-edge.com/80588/img/unfurl_icons/youtube.png"
}
]
}