jsx-components-for-block-kit.md

Top » JSX components for Block Kit

JSX components for Block Kit

Block containers

• <Blocks>: The basic container for messages
• <Modal>: The view container for modals
• <Home>: The view container for home tabs

Layout blocks

• <Section>: Section Block
  • <Field>: Fields for section block
• <Divider>: Divider Block
• <Image>: Image Block
• <Actions>: Actions Block
• <Context>: Context Block
• <File>: File Block (Only for messaging)
• <Input>: Input Block (Only for modal)

Block elements

Interactive components

• <Button>: Button element
• <Select>: Select menu with static options
  • <Option>: Menu item
  • <Optgroup>: Group of menu items
• <ExternalSelect>: Select menu with external data source
  • <SelectFragment>: Generate options for external source
• <UsersSelect>: Select menu with user list
• <ConversationsSelect>: Select menu with conversations list
• <ChannelsSelect>: Select menu with channel list
• <Overflow>: Overflow menu
  • <OverflowItem>: Menu item in overflow menu
• <DatePicker>: Select date from calendar
• <CheckboxGroup>: Checkbox group (Only for modal and home tab)
  • <Checkbox>: Checkbox
• <RadioButtonGroup>: Radio button group (Only for modal and home tab)
  • <RadioButton>: Radio button

Composition objects

• <Confirm>: Confirmation dialog
• <Mrkdwn>: Text composition object for mrkdwn type

Input components for modal

• <Input>: Plain-text input element
  • <Input type="hidden">: Store hidden values to modal
  • <Input type="submit">: Set submit button text of modal
• <Textarea>: Plain-text input element with multiline

Built-in components

• <Fragment>: Grouping components
• <Escape>: Escape special characters

---

Top » JSX components for Block Kit