Cards
Rich card components for cross-platform interactive messages.
Card components render natively on each platform — Block Kit on Slack, Adaptive Cards on Teams, Embeds on Discord, and Google Chat Cards.
import { Card, Text, Button, Actions, Section, Fields, Field, Divider, Image, LinkButton } from "chat";All components support both function-call and JSX syntax. Function-call syntax is recommended for better type inference.
Card
Top-level container for a rich message.
Card({
title: "Order #1234",
subtitle: "Pending approval",
children: [Text("Total: $50.00")],
})Prop
Type
Text
Text content element. Use CardText instead of Text in JSX to avoid conflicts with React's built-in types.
Text("Hello, world!")
Text("Important", { style: "bold" })
Text("Subtle note", { style: "muted" })Prop
Type
Button
Interactive button that triggers an onAction handler.
Button({ id: "approve", label: "Approve", style: "primary" })
Button({ id: "delete", label: "Delete", style: "danger", value: "item-123" })Prop
Type
LinkButton
Button that opens a URL. No onAction handler needed.
LinkButton({ url: "https://example.com", label: "View Docs" })Prop
Type
Actions
Container for buttons and interactive elements. Required wrapper around Button, LinkButton, Select, and RadioSelect.
Actions([
Button({ id: "approve", label: "Approve", style: "primary" }),
Button({ id: "reject", label: "Reject", style: "danger" }),
LinkButton({ url: "https://example.com", label: "View" }),
])Section
Groups related content together.
Section([
Text("Grouped content"),
Image({ url: "https://example.com/photo.png" }),
])Fields
Renders key-value pairs in a compact, multi-column layout.
Fields([
Field({ label: "Name", value: "Jane Smith" }),
Field({ label: "Role", value: "Engineer" }),
])Field
A single key-value pair. Must be used inside Fields.
Prop
Type
Image
Embeds an image in the card.
Image({ url: "https://example.com/screenshot.png", alt: "Screenshot" })Prop
Type
Divider
A visual separator between sections.
Divider()CardChild types
The children array in Card and Section accepts these element types:
| Type | Created by |
|---|---|
TextElement | Text() |
ImageElement | Image() |
DividerElement | Divider() |
ActionsElement | Actions() |
SectionElement | Section() |
FieldsElement | Fields() |