Block Kit is made up of many atomic building blocks.
Blocks are visual components that can be arranged to create app layouts. Apps can add blocks to surfaces like App Home, messages and modals.
Blocks may also contain block elements. Block elements are usually interactive components, such as buttons and menus.
Blocks and block elements are built with composition objects. Composition objects define text, options, or other interactive features within certain blocks and block elements.
| Block | Description |
|---|---|
| Actions block | Holds multiple interactive elements. |
| Context block | Provides contextual info, which can include both images and text. |
| Divider block | Visually separates pieces of info inside of a message. |
| File block | Displays info about remote files. |
| Header block | Displays a larger-sized text block. |
| Image block | Displays an image. |
| Input block | Collects information from users via block elements. |
| Rich text block | Displays formated, structured representation of text. |
| Section block | Displays text, possibly alongside block elements. |
| Video block | Displays an embedded video player. |
| Block element | Description |
|---|---|
| Button element | Allows users a direct path to performing basic actions. |
| Checkboxes element | Allows users to choose multiple items from a list of options. |
| Date picker element | Allows users to select a date from a calendar style UI. |
| Datetime picker element | Allows users to select both a date and a time of day. |
| Email input element | Allows user to enter an email into a single-line field. |
| Image element | Displays an image as part of a larger block of content. |
| Multi-select menu element | Allows users to select multiple items from a list of options. |
| Number input element | Allows user to enter a number into a single-line field. |
| Overflow menu element | Allows users to press a button to view a list of options. |
| Plain-text input element | Allows users to enter freeform text data into a single-line or multi-line field. |
| Radio buttons element | Allows users to choose one item from a list of possible options. |
| Rich text input element | Allows users to enter formatted text in a WYSIWYG composer, offering the same messaging writing experience as in Slack. |
| Select menu element | Allows users to choose an option from a drop down menu. |
| Time picker element | Allows users to enter numerical data into a single-line field. |
| URL input element | Allows user to enter a URL into a single-line field. |
| Workflow button element | Allows users to run a link trigger with customizable inputs. |
| Composition object | Description |
|---|---|
| Confirmation dialog object | Provides a dialog that adds a confirmation step to interactive elements. |
| Conversations filter object | Provides a way to filter the list of options in conversation selector menus. |
| Dispatch action configuration object | Defines when a plain-text input element will return a block_actions interaction payload. |
| Input parameter object | Defines an object containing information about an input parameter. |
| Option object | Represents a single item in a number of item selection elements. |
| Option group object | Used to group option objects in select menus. |
| Text object | Defines text for many different blocks and elements. |
| Trigger object | Defines an object containing trigger information. |
| Workflow object | Defines an object containing workflow information. |
| Slack file object | Defines an object containing Slack file information to be used in an image block or image element. |