Action

A single collapsible row for one action.

Anatomy

A header that names what the model did, with optional detail tucked behind a chevron. Reach for it when one action deserves its own block, like a single file read or a single command run. For a sequence of actions, use Task. For the model's thinking pass, use Reasoning.

The header pairs an icon, a verb, and an optional Chip for the target. The body opens to anything from a one-line summary to a CodeBlock of the output.

TSX

API

Reference for each part of the component, including its available props and behavior.

Action

Root collapsible. Lays out as a column so the trigger and content stack.

Prop

ActionTrigger

Clickable header. Renders its children inline followed by a chevron that rotates from right to down when opened. Place the icon, label, and any target chip as children in that order.

Prop

ActionIcon

The leading mark in the header. Defaults to a small filled circle. Pass a tool icon as children for any specific action, like a file icon for a read or a terminal icon for a command. The container keeps a fixed width so swapping the inner element does not shift the row.

Prop

ActionLabel

The action's name. Reads as the verb of the row, like Read, Ran, or Searched.

Prop

ActionContent

Expanding panel. Animates height open and close. Indented to align past the icon so the chevron acts as a visual gutter. Holds anything from short text to a full CodeBlock.

Prop