Block Kit is made up of many atomic building blocks. Follow these field guides down the rabbit hole to build the perfect Block Kit burrow for your app.
Block Kit components
There is a simple hierarchy to the library of Block Kit components:
Blocks
- Actions A block that is used to hold multiple interactive elements.
- Context Used for contextual info, which can include both images and text.
- Divider A content divider used to visually separate pieces of info inside of a message.
- File Used with remote files to display info about the attached files.
- Header A larger-sized text block used as a header.
- Image A simple image block, designed to make those cat photos really pop.
- Input A block that collects information from users in a multitude of ways.
- Section Display text or combine text with interactive elements and images.
- Video A block designed to display those cool cat videos.
Elements
- Button A button that can be a trigger for anything from opening a simple link to starting a complex workflow.
- Checkboxes A checkbox group that allows a user to choose multiple items from a list of possible options.
- Date picker An element which lets users easily select a date from a calendar style UI.
- Datetime picker An element which lets a user easily select a date from a calendar style UI and a time from a scrollable time picker UI.
- Email input Creates a single line field where a user can enter a valid email address consisting of an email prefix and domain.
- Image An element to insert an image as part of a larger block of content.
- Multi-select menu A multi-select menu allows a user to select multiple items from a list of options.
- Number input Creates a single line field where a user can enter a whole number or floating point number.
- Overflow menu A cross between a button and a select menu - a button that shows a list of options when clicked.
- Plain-text input Creates a single or multi-line field where a user can enter freeform text data.
- Radio button group A radio button group that allows a user to choose one item from a list of possible options.
- Select menus Creates a drop down menu with a list of options for a user to choose.
- Time picker An element that allows uers to easily select a time of day.
- URL input Creates a single line field where a user can enter an absolute URL.
Composition objects
- Text Defines text for many different blocks and elements.
- Confirmation dialog Provides a dialog that adds a confirmation step to interactive elements.
- Option Represents a single item in a number of item selection elements.
- Option group Used to group option objects in select menus.
- Conversation filters Provides a way to filter the list of options in conversation selector menus.
block_actions payloads A block_actions payload is received when a user interacts with a Block Kit interactive component.- Defining views Views are used to define modals and Home tabs layouts, using blocks as the visual components.
- Upgrading from dialogs to modals Learn how to replace legacy dialogs with Block Kit enriched modals.
- Accessibility Learn best practices and our recommendations for how to make your apps more accessible.