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.
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.
- 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.
- 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.
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.
