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
• <Header>: Header Block
• <Actions>: Actions Block
• <Context>: Context Block
• <Input>: Input Block
• <Video>: Video Block
• <File>: File Block (Only for messaging)
• <Call>: Call Block (Only for messaging)

Block elements

Interactive components

• <Button>: Button element
  • <WorkflowButton>: Workflow button element (Only for messaging)
• <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
• <TimePicker>: Select time through picker
• <DateTimePicker>: Select date and time through picker
• <CheckboxGroup>: Checkbox group
  • <Checkbox>: Checkbox
• <RadioButtonGroup>: Radio button group
  • <RadioButton>: Radio button

Composition objects

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

Input components

• <Input>: Text input element
  • <Input type="hidden">: Store hidden values to <Modal> and <Home>
  • <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