Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Callout

A tinted panel that groups other blocks together, for a highlighted tip or status.

callout wraps a list of child blocks in a rounded, tinted panel. Use it to draw attention to a tip, a summary, or a status message that’s more than a single line of text.

Your AppAPP
This is a callout block with bold text and italic text.

Key details
Callouts support rich text, sections, dividers, and images as child blocks.
A sample landscape image

Fields

PropType
typestring

Always `callout`.

Typestring
background_color?"green" | "blue" | "red" | "yellow" | "purple" | "gray" | "grey"

The panel's tint. `green` and `blue` are measured against Slack's Block Kit Builder; the rest are extrapolated to the same pastel style. An unrecognized or omitted value falls back to `gray`.

Type"green" | "blue" | "red" | "yellow" | "purple" | "gray" | "grey"
Default"gray"
child_blocksBlock[]

Blocks rendered inside the panel: rich text, sections, dividers, images, and contact cards.

TypeBlock[]

Examples

Every child block type

The preview above nests rich text, a divider, a section, and an image inside a callout.

Each background color

Your AppAPP
Green callout.
Your AppAPP
Blue callout.
Your AppAPP
Red callout.
Your AppAPP
Yellow callout.
Your AppAPP
Purple callout.

Was this page helpful?