Send rich interactive cards with buttons, fields, and images across all platforms.

Cards let you send structured, interactive messages that render natively on each platform — Block Kit on Slack, Adaptive Cards on Teams, Discord embeds or Components, and Google Chat Cards.

Setup

Configure your tsconfig.json to use the Chat SDK JSX runtime:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "chat"
  }
}

Or use a per-file pragma:

lib/bot.tsx

/** @jsxImportSource chat */

Basic card

lib/bot.tsx

import { Card, CardText, Button, Actions } from "chat";

await thread.post(
  <Card title="Order #1234">
    <CardText>Your order has been received!</CardText>
    <Actions>
      <Button id="approve" style="primary">Approve</Button>
      <Button id="reject" style="danger">Reject</Button>
    </Actions>
  </Card>
);

Components

Card

The top-level container. Accepts title and optional subtitle.

lib/bot.tsx

<Card title="My Card" subtitle="Optional subtitle">
  {/* children */}
</Card>

CardText

Renders formatted text. Supports a subset of markdown.

lib/bot.tsx

<CardText>**Bold** and _italic_ text</CardText>
<CardText style="bold">Bold section header</CardText>

Use CardText instead of Text when using JSX to avoid conflicts with React's built-in types.

Section

Groups related content together.

lib/bot.tsx

<Section>
  <CardText>Section content here</CardText>
</Section>

Fields

Renders key-value pairs in a compact layout.

lib/bot.tsx

<Fields>
  <Field label="Name" value="John Doe" />
  <Field label="Role" value="Developer" />
  <Field label="Team" value="Platform" />
</Fields>

Button

An action button that triggers an onAction handler.

lib/bot.tsx

<Button id="approve" style="primary">Approve</Button>
<Button id="reject" style="danger">Reject</Button>
<Button id="details">View Details</Button>

The id maps to your onAction handler. Optional value passes extra data:

lib/bot.tsx

<Button id="report" value="bug">Report Bug</Button>

Set actionType="modal" to indicate the button opens a modal. The button still triggers your onAction handler, where you call event.openModal() — this prop tells adapters like Teams to wire up the button for dialog opening:

lib/bot.tsx

<Button id="open-feedback" actionType="modal">Give Feedback</Button>

Optional callbackUrl causes the action data to be POSTed to a URL when clicked. See Callback URLs for details.

lib/bot.tsx

<Button callbackUrl={webhook.url} id="approve" style="primary">Approve</Button>

CardLink

Inline hyperlink rendered as text. Unlike LinkButton (which must be inside Actions), CardLink can be placed directly in a card alongside other content.

lib/bot.tsx

<CardLink url="https://example.com/order/1234" label="View order details" />

Or with children as the label:

lib/bot.tsx

<CardLink url="https://example.com/docs">Read the docs</CardLink>

CardLink renders as a platform-native link: <url|label> on Slack, [label](url) on Teams/Discord/GitHub/Linear, and <a href> on Google Chat.

LinkButton

Opens an external URL. No onAction handler needed for navigation. On platforms that emit link-button click events, such as Slack, pass id when you need a stable action identifier for routing or analytics.

lib/bot.tsx

<LinkButton url="https://example.com/order/1234">View Order</LinkButton>

lib/bot.tsx

<LinkButton id="view_order" url="https://example.com/order/1234">
  View Order
</LinkButton>

Actions

Container for buttons and interactive elements.

lib/bot.tsx

<Actions>
  <Button id="approve" style="primary">Approve</Button>
  <Button id="reject" style="danger">Reject</Button>
  <LinkButton url="https://example.com">View</LinkButton>
</Actions>

Select

Inline dropdown menu.

lib/bot.tsx

<Actions>
  <Select id="priority" label="Priority" placeholder="Select priority">
    <SelectOption label="High" value="high" description="Urgent tasks" />
    <SelectOption label="Medium" value="medium" />
    <SelectOption label="Low" value="low" />
  </Select>
</Actions>

Selection triggers an onAction handler with the id as the actionId and the selected value.

RadioSelect

Radio button group for mutually exclusive choices.

lib/bot.tsx

<Actions>
  <RadioSelect id="status" label="Status">
    <SelectOption label="Open" value="open" />
    <SelectOption label="In Progress" value="in_progress" />
    <SelectOption label="Done" value="done" />
  </RadioSelect>
</Actions>

Table

Structured data display with column headers and rows. Renders as a native table on platforms that support it (Slack, Teams, GitHub, Linear), as GFM markdown in Discord card payloads, and as padded ASCII text elsewhere.

lib/bot.tsx

<Table
  headers={["Name", "Age", "Role"]}
  rows={[
    ["Alice", "30", "Engineer"],
    ["Bob", "25", "Designer"],
  ]}
/>

Optional column alignment:

lib/bot.tsx

<Table
  headers={["Name", "Amount"]}
  rows={[["Alice", "$100"], ["Bob", "$200"]]}
  align={["left", "right"]}
/>

On Slack, tables render as paginated, sortable data tables. The optional caption (accessible table description) and pageSize (rows per page, 1–100) props tune that rendering and are ignored on other platforms:

lib/bot.tsx

<Table
  headers={["Name", "Score"]}
  rows={[["Alice", "98"], ["Bob", "87"]]}
  caption="Quarterly review scores"
  pageSize={10}
/>

Chart

Data visualization with pie, bar, area, and line charts. Renders as a native data visualization on Slack; other platforms fall back to the chart's data rendered as a text table.

lib/bot.tsx

<Chart
  title="My Favorite Candy Bars"
  chart={{
    type: "pie",
    segments: [
      { label: "Kit Kat", value: 45 },
      { label: "Twix", value: 28 },
      { label: "Crunch", value: 18 },
    ],
  }}
/>

Bar, area, and line charts take named series plotted against shared categories:

lib/bot.tsx

<Chart
  title="Daily Active Users"
  chart={{
    type: "line",
    categories: ["Mon", "Tue", "Wed"],
    xLabel: "Day",
    yLabel: "Users",
    series: [
      {
        name: "Web",
        data: [
          { label: "Mon", value: 120 },
          { label: "Tue", value: 135 },
          { label: "Wed", value: 128 },
        ],
      },
      {
        name: "Mobile",
        data: [
          { label: "Mon", value: 80 },
          { label: "Tue", value: 95 },
          { label: "Wed", value: 90 },
        ],
      },
    ],
  }}
/>

Slack enforces a 50-character title, up to 12 segments or series, up to 20 categories, 20-character labels, and at most 2 charts per message. Charts that exceed these limits fall back to a text rendering of the data instead of being rejected by the API.

Image

Embeds an image in the card.

lib/bot.tsx

<Image url="https://example.com/screenshot.png" alt="Screenshot" />

Divider

A visual separator between sections.

lib/bot.tsx

<CardText>Above the line</CardText>
<Divider />
<CardText>Below the line</CardText>

Full example

lib/bot.tsx

import {
  Card, CardText, CardLink, Button, LinkButton, Actions,
  Section, Fields, Field, Divider, Image,
  Select, SelectOption, RadioSelect,
} from "chat";

await thread.post(
  <Card title="User Profile" subtitle="Account details">
    <Image url="https://example.com/avatar.png" alt="User avatar" />
    <Fields>
      <Field label="Name" value="Jane Smith" />
      <Field label="Role" value="Engineer" />
      <Field label="Team" value="Platform" />
    </Fields>
    <CardLink url="https://example.com/profile/123">View full profile</CardLink>
    <Divider />
    <Section>
      <CardText>Select an action below to manage this profile.</CardText>
    </Section>
    <Actions>
      <Select id="role" label="Change Role" placeholder="Select role">
        <SelectOption label="Engineer" value="engineer" />
        <SelectOption label="Manager" value="manager" />
        <SelectOption label="Admin" value="admin" />
      </Select>
      <Button id="edit" style="primary">Edit Profile</Button>
      <Button id="deactivate" style="danger">Deactivate</Button>
      <LinkButton url="https://example.com/profile/123">View Full Profile</LinkButton>
    </Actions>
  </Card>
);

Latest

Frameworks

SDKs

Other

Cards

Setup

Basic card

Components

Card

CardText

Section

Fields

Button

CardLink

LinkButton

Actions

Select

RadioSelect

Table

Chart

Image

Divider

Full example

Read more

Actions

Modals

Cards

Emoji