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 |
---|---|
Holds multiple interactive elements. |
|
Provides contextual info, which can include both images and text. |
|
Visually separates pieces of info inside of a message. |
|
Displays info about remote files. |
|
Displays a larger-sized text block. |
|
Displays an image. |
|
Collects information from users via block elements. |
|
Displays formated, structured representation of text. |
|
Displays text, possibly alongside block elements. |
|
Displays an embedded video player. |
Block element | Description |
---|---|
Allows users a direct path to performing basic actions. |
|
Allows users to choose multiple items from a list of options. |
|
Allows users to select a date from a calendar style UI. |
|
Allows users to select both a date and a time of day. |
|
Allows user to enter an email into a single-line field. |
|
Displays an image as part of a larger block of content. |
|
Allows users to select multiple items from a list of options. |
|
Allows user to enter a number into a single-line field. |
|
Allows users to press a button to view a list of options. |
|
Allows users to enter freeform text data into a single-line or multi-line field. |
|
Allows users to choose one item from a list of possible options. |
|
Allows users to enter formatted text in a WYSIWYG composer, offering the same messaging writing experience as in Slack. |
|
Allows users to choose an option from a drop down menu. |
|
Allows users to enter numerical data into a single-line field. |
|
Allows user to enter a URL into a single-line field. |
|
Allows users to run a link trigger with customizable inputs. |
Composition object | Description |
---|---|
Provides a dialog that adds a confirmation step to interactive elements. |
|
Provides a way to filter the list of options in conversation selector menus. |
|
Defines when a plain-text input element will return a block_actions interaction payload. |
|
Defines an object containing information about an input parameter. |
|
Represents a single item in a number of item selection elements. |
|
Used to group option objects in select menus. |
|
Defines text for many different blocks and elements. |
|
Defines an object containing trigger information. |
|
Defines an object containing workflow information. |
|
Defines an object containing Slack file information to be used in an image block or image element. |