Layout components

Layout components say how content is grouped, without pixel values. Reintersect picks every gap from the relationship between siblings, and on narrow screens it stacks columns. See What Reintersect decides.

Stack

Groups children so they’re spaced as one unit. Blocks already stack their direct children, so use Stack when a few pieces belong together and should sit apart from the content around them. A stack can’t hold another stack.

<Stack>
  <Text>Ada approved.</Text>
  <Text muted>Waiting on Grace.</Text>
</Stack>

Prop	Type	Required	Description
`children`	JSX	Yes	The grouped content.
`audience`	`Audience`	No	Limit who sees it.

Row

A line of text with a few small buttons at its end. Use it for a sentence that has its own quick actions, such as a checklist item with Done and Skip. A row holds one or two Text or AvatarStack elements, then up to three Button or Menu accessories.

<Row>
  <Text>Update the status page</Text>
  <Button label="Done" icon="check" action={actions.complete.with({ item: "status-page" })} />
  <Button type="link" label="Open" href="https://status.example.com" />
</Row>

Prop	Type	Required	Description
`children`	JSX	Yes	One or two `Text` or `AvatarStack`, then up to three `Button` or `Menu`.
`audience`	`Audience`	No	Limit who sees it.

Buttons in a row are small accessory buttons that line up with the text. They’re never primary, and their labels are unique within the row. A row with only one child renders as that child. To put badges or a time next to text, place them inline in the Text. Agent text joins the children with spaces.

Columns and Column

Two or three columns side by side. Use them to place groups of content next to each other, such as two sets of facts.

<Columns>
  <Column>
    <Facts>
      <Fact label="Owner">Ada Lovelace</Fact>
      <Fact label="Team">Payments</Fact>
    </Facts>
  </Column>
  <Column>
    <Facts>
      <Fact label="Opened">
        <Time datetime="2026-10-05T09:30:00Z" format="date" />
      </Fact>
      <Fact label="Priority">P1</Fact>
    </Facts>
  </Column>
</Columns>

Prop	Component	Type	Required	Description
`children`	`Columns`	`Column` elements	Yes	Two or three columns.
`audience`	`Columns`	`Audience`	No	Limit who sees them.
`children`	`Column`	JSX	Yes	The column’s content.

Columns sit side by side only when every column gets at least 200px, measured on the Columns itself: 424px for two columns and 648px for three. Below that, they all stack into one column. In a conversation thread, two columns sit side by side and three stack. Columns go at the block, section, tab or form level. A Column can’t hold a Table, Chart, Prose, Heading or Code, because those need the full width.

Callout

A highlighted note inside a block. Use it for something viewers should notice, such as a warning that a deployment is waiting for review.

<Callout tone="warning" title="Waiting for review">
  <Text>Two approvals are needed before this can ship.</Text>
</Callout>

Prop	Type	Required	Description
`children`	JSX	Yes	`Text`, `Prose` and `MetaList` only.
`tone`	`Tone`	No	`neutral`, `info`, `success`, `warning` or `danger`.
`icon`	`IconName`	No	Only on a neutral or untoned callout. A toned callout shows its tone’s glyph.
`title`	`string`	No	A short heading, up to 80 characters. Agent text starts with it.
`audience`	`Audience`	No	Limit who sees it.

A callout holds text only: no buttons, and no callouts inside callouts. When a callout reports an error, put Retry in the block’s root Actions. Screen readers hear the tone’s word, such as “Warning”, before the callout’s text.

Catalog

Recipes

Stack

Row

Columns and Column

Callout

​Stack

​Row

​Columns and Column

​Callout

Stack

Row

Columns and Column

Callout