slack-block-kit（Slack block KIT 前端）

Slack Block Kit

UI framework for building rich, interactive layouts in Slack messages, modals, and App Home.

CRITICAL: Two Markup Systems

Text inside Block Kit text objects uses Slack mrkdwn syntax (*bold*, <url|text>), NOT standard Markdown. The only exception is the markdown block which uses standard Markdown.

Quick Decision Trees

"Should I use blocks?"

Response type?
├─ Conversational reply, short answer, <3 lines   → text only (no blocks)
├─ Multi-section summary, report, dashboard        → blocks
├─ Two-column key-value data                       → blocks (section fields)
├─ Tabular data                                    → blocks (table)
├─ Code with heading or surrounding context         → blocks
├─ Visual separation needed between topics          → blocks
└─ Feedback buttons or interactive elements         → blocks

"Which block type?"

What am I rendering?
├─ Large section title                → header (plain_text, 150 chars max)
├─ Body text or key-value pairs       → section (text + fields + accessory)
├─ Small metadata or secondary info   → context (images + text, 10 max)
├─ Horizontal separator               → divider
├─ Buttons, menus, date pickers       → actions (25 elements max)
├─ Status, warning, success callout    → alert (severity + text)
├─ Compact entity or summary preview   → card (optional image/actions)
├─ Multiple comparable cards/options   → carousel (1-10 cards)
├─ Standalone image                   → image (image_url or slack_file)
├─ Formatted text with lists, quotes  → rich_text (nested sub-elements)
├─ Tabular data                       → table (100 rows, 20 cols, 1 per msg)
├─ LLM-generated markdown content     → markdown (standard MD, messages only)
├─ Embedded video player              → video (requires links.embed:write)
├─ Remote file reference              → file (read-only, source: "remote")
├─ Feedback thumbs up/down            → context_actions (messages only)
├─ Collecting user input (modals)     → input (label + element)
├─ AI agent task steps                → plan (sequential tasks, messages only)
└─ Single task with status            → task_card (inside plan or standalone)

"mrkdwn or markdown block?"

Content source?
├─ Short formatted text, labels, fields     → mrkdwn in section/context
├─ Long-form LLM-generated content          → markdown block (standard MD)
├─ LLM-generated tables/task lists/code      → markdown block
├─ Programmatic tabular data                 → table block
├─ Need headings                            → markdown block or header blocks
└─ Mixed: structured layout + prose         → section/header blocks + markdown block

Block Types Overview

header

Large bold text for section titles. plain_text only. Max 150 chars.

{ "type": "header", "text": { "type": "plain_text", "text": "Section Title", "emoji": true } }

section

Primary content block. Supports text, two-column fields, and one accessory element.

{
  "type": "section",
  "text": { "type": "mrkdwn", "text": "*Project Status*\nAll systems operational." }
}

Two-column fields layout:

{
  "type": "section",
  "fields": [
    { "type": "mrkdwn", "text": "*Status:*\nActive" },
    { "type": "mrkdwn", "text": "*Owner:*\nChris" },
    { "type": "mrkdwn", "text": "*Priority:*\nHigh" },
    { "type": "mrkdwn", "text": "*Due:*\nFriday" }
  ]
}

Either text or fields required (or both). Text max 3000 chars. Fields max 10 items, each max 2000 chars. Set expand: true to force full text display without "see more" truncation.

Compatible accessories: button, overflow, datepicker, timepicker, select menus, multi-select menus, checkboxes, radio buttons, image.

divider

{ "type": "divider" }

context

Small, muted text for metadata. Elements: mrkdwn text objects or image elements. Max 10 elements.

{
  "type": "context",
  "elements": [
    { "type": "mrkdwn", "text": "Last updated: Feb 9, 2026" },
    { "type": "mrkdwn", "text": "Source: deploy-bot" }
  ]
}

actions

Interactive elements: buttons, select menus, overflow menus, date pickers. Max 25 elements.

{
  "type": "actions",
  "elements": [
    {
      "type": "button",
      "text": { "type": "plain_text", "text": "Approve", "emoji": true },
      "style": "primary",
      "action_id": "approve_action",
      "value": "approved"
    }
  ]
}

Button styles: primary (green), danger (red), or omit for default. Use primary sparingly — one per set. Action IDs must be unique within the message.

alert

Callout for status, risk, confirmation, or urgency. Text accepts plain_text or mrkdwn. level: default, info, warning, error, or success (defaults to default).

{
  "type": "alert",
  "text": { "type": "mrkdwn", "text": "*Dependency conflict detected* before deploy." },
  "level": "warning"
}

card

Compact, scannable preview for entities, summaries, records, or agent results. At least one of hero_image, title, actions, or body is required. There is currently no size attribute.

{
  "type": "card",
  "title": { "type": "mrkdwn", "text": "Daily Standup Reminder" },
  "subtitle": { "type": "mrkdwn", "text": "Runs every weekday at *9:00 AM*" },
  "body": { "type": "mrkdwn", "text": "Last run: Today at 9:00 AM. Status: Success" },
  "actions": [
    {
      "type": "button",
      "text": { "type": "plain_text", "text": "View Logs" },
      "action_id": "view_logs"
    }
  ]
}

Fields: icon and hero_image are image objects; title, subtitle, and body are text objects; actions is an array of button elements. Title/subtitle max 150 chars. Body max 200 chars.

carousel

Horizontal, scrollable group of card blocks for options, recommendations, search results, or next steps. Must contain 1-10 cards.

{
  "type": "carousel",
  "elements": [
    { "type": "card", "title": { "type": "mrkdwn", "text": "Option A" } },
    { "type": "card", "title": { "type": "mrkdwn", "text": "Option B" } }
  ]
}

image

Standalone image with alt text. Provide either image_url (public, max 3000 chars) or slack_file object. Formats: png, jpg, jpeg, gif.

{
  "type": "image",
  "image_url": "https://example.com/chart.png",
  "alt_text": "Deployment success rate chart",
  "title": { "type": "plain_text", "text": "Deploy Metrics" }
}

rich_text

Advanced formatted text with nested elements. Supports styled text, lists, code blocks, and quotes. See references/RICH-TEXT.md for deep dive.

{
  "type": "rich_text",
  "elements": [
    {
      "type": "rich_text_section",
      "elements": [
        { "type": "text", "text": "Key findings:", "style": { "bold": true } }
      ]
    },
    {
      "type": "rich_text_list",
      "style": "bullet",
      "elements": [
        { "type": "rich_text_section", "elements": [{ "type": "text", "text": "Latency reduced by 40%" }] },
        { "type": "rich_text_section", "elements": [{ "type": "text", "text": "Error rate under 0.1%" }] }
      ]
    }
  ]
}

Sub-element types: rich_text_section (paragraph), rich_text_list (style: "bullet" or "ordered", with indent, offset, border), rich_text_preformatted (code block), rich_text_quote (blockquote).

Inline element types within sections: text (with optional style: {bold, italic, strike, code, underline}), link, emoji, user, channel, usergroup, broadcast, date, color.

table

Tabular data. One table per message (appended as attachment at bottom).

{
  "type": "table",
  "rows": [
    [
      { "type": "raw_text", "text": "Service" },
      { "type": "raw_text", "text": "Status" },
      { "type": "raw_text", "text": "Latency" }
    ],
    [
      { "type": "raw_text", "text": "API" },
      { "type": "raw_text", "text": "Healthy" },
      { "type": "raw_text", "text": "12ms" }
    ]
  ],
  "column_settings": [
    { "align": "left" },
    { "align": "center" },
    { "align": "right" }
  ]
}

Each row is an array of cell objects (NOT an object with a cells property). Cell types: raw_text or rich_text. There is no columns property — the first row is the header. Max 100 rows, 20 columns. Multiple tables trigger invalid_attachments error.

markdown

Standard Markdown rendering for AI app output. Messages only.

{ "type": "markdown", "text": "**Bold**, *italic*, [link](https://example.com)\n\n## Heading\n\n- List item" }

Supports: bold, italic, strikethrough, links, headers, ordered/unordered lists, inline code, code blocks with optional syntax highlighting, block quotes, horizontal rules/dividers, tables, task lists, and character escaping. Images render as hyperlink text. Cumulative 12,000 char limit per payload. block_id is ignored. A single markdown block may translate into multiple Slack blocks.

context_actions

Feedback and icon buttons for message-level actions. Messages only. Max 5 elements. Compatible elements: feedback_buttons, icon_button.

video

Embedded video player. Requires links.embed:write scope, publicly accessible URL in app's unfurl domains.

input

Collects user data in modals, messages, and Home tabs. Requires label (plain_text, 2000 chars) and one compatible element. See references/ELEMENTS.md for all input element types.

plan

Container for sequential task cards, designed for AI agent output. Messages only.

{
  "type": "plan",
  "title": "Thinking completed",
  "tasks": [
    { "task_id": "t1", "title": "Fetched data", "status": "complete" },
    { "task_id": "t2", "title": "Generating report", "status": "in_progress" }
  ]
}

Task status values: pending, in_progress, complete, error. Each task is a task_card block with optional details, output (rich_text), and sources (url elements).

streaming agent output

Use chat.startStream, chat.appendStream, and chat.stopStream for live AI responses. Streamed messages should be replies to a user request (thread_ts required on start) and require chat:write.

chunks can include:

• markdown_text chunks for standard Markdown text
• task_update chunks for timeline-style task progress
• plan_update chunks for updating a plan title
• blocks chunks for arrays of Block Kit blocks

Set task_display_mode on chat.startStream:

• timeline (default): tasks appear individually in sequence
• plan: tasks appear grouped in one plan, with the first task placement determining the plan placement

chat.stopStream can add final blocks rendered after streamed chunks or markdown_text. It has a separate 50-block limit from streamed blocks chunks, allowing up to 100 total finalized blocks.

file

Remote file reference. Read-only. Cannot be directly added to messages by apps.

Composition Objects

Option Object

Used in select menus, overflow, checkboxes, radio buttons:

{
  "text": { "type": "plain_text", "text": "Option 1" },
  "value": "opt_1",
  "description": { "type": "plain_text", "text": "Detailed description" }
}

Text max 75 chars. value max 150 chars. description optional, max 75 chars.

Confirmation Dialog

{
  "title": { "type": "plain_text", "text": "Are you sure?" },
  "text": { "type": "plain_text", "text": "This action cannot be undone." },
  "confirm": { "type": "plain_text", "text": "Yes, do it" },
  "deny": { "type": "plain_text", "text": "Cancel" },
  "style": "danger"
}

Conversation Filter

Filters conversation select menus. include: im, mpim, private, public.

Dispatch Action Configuration

Controls when input elements trigger block_actions: on_enter_pressed, on_character_entered.

See references/COMPOSITION.md for full property tables.

Limits

Anti-Patterns

Best Practices

Use blocks when:

• The response has multiple distinct sections (summaries, reports, dashboards)
• Two-column key-value layouts improve readability (metadata, config summaries)
• A table presents data more clearly than prose
• Visual separation between topics helps comprehension
• Code needs a header or surrounding context
• Interactive elements (buttons, menus, feedback) are needed

Don't use blocks when:

• The response is conversational ("sure, done", "hey, good morning")
• The response is under ~3 lines of text
• The content is a simple answer to a direct question

Always:

• Provide a complete text field as the accessible fallback (notifications, threads, search, screen readers)
• Keep the text and blocks semantically aligned
• Use mrkdwn syntax in text objects, not standard Markdown (except in markdown blocks)
• Escape &, <, > in user-generated content

Surfaces Overview

Modals collect input via input blocks, return view_submission payloads. They chain up to 3 views with push/update/clear response actions. private_metadata (3000 chars) persists context between views.

Work Objects

Work Objects render rich entity previews when links are shared in Slack. They extend link unfurling with structured data, flexpane details, editable fields, and actions.

Entity Types

Work Objects use chat.unfurl with a metadata parameter containing entity type, external reference, and entity payload. See references/WORK-OBJECTS.md for full implementation details.

Reference Documentation

Sources

• Block Kit Reference — Slack
• Block Kit Blocks — Slack
• Alert Block — Slack
• Card Block — Slack
• Carousel Block — Slack
• Block Kit Elements — Slack
• Block Kit Composition Objects — Slack
• Streaming Messages — Slack
• Work Objects — Slack
• Surfaces — Slack
• Modals — Slack
• App Home — Slack
• Canvases — Slack
• Lists — Slack
• Split View — Slack
• App Design — Slack