Reasoning

Usage

Reasoning discloses the assistant's reasoning under a muted trigger row. Pass the label for the state the reasoning is in, and the reasoning as children:

label is the completed label, for example "Thought for 12s". The caller formats the elapsed time in the user's language; Reasoning formats nothing.
While isStreaming is true the trigger shows streamingLabel (falling back to label), the label is a Shimmer with a leading sparkle (a highlight sweeps across it while the stream lasts), and the region starts open. Once streaming ends the label changes to label, the sparkle goes, and the region keeps whatever open state it has.
defaultOpen overrides the streaming default for the first render only. open and onOpenChange control the state; details.cancel() keeps the current state.
children may be block content (paragraphs, lists). The region sets the body type at the subtle tier, the same size as the trigger label, so a link in it is label-sized and set apart by its color and underline. A Response in the region keeps its larger Body Large scale unless you pass size={ResponseSize.Compact}.
Reasoning composes a flush Collapsible, so the trigger, the open and close motion, and the chevron are Collapsible's.
The streaming label is Shimmer with base={ShimmerBase.Readable}, so it rests at the subtle tier and keeps AA text contrast at every point of the sweep. Reasoning needs no prop for it.

Range Slider / Accessibility

Reasoning / API and Development

Reasoning

Usage

Reasoning discloses the assistant's reasoning under a muted trigger row. Pass the label for the state the reasoning is in, and the reasoning as children:

label is the completed label, for example "Thought for 12s". The caller formats the elapsed time in the user's language; Reasoning formats nothing.
While isStreaming is true the trigger shows streamingLabel (falling back to label), the label is a Shimmer with a leading sparkle (a highlight sweeps across it while the stream lasts), and the region starts open. Once streaming ends the label changes to label, the sparkle goes, and the region keeps whatever open state it has.
defaultOpen overrides the streaming default for the first render only. open and onOpenChange control the state; details.cancel() keeps the current state.
children may be block content (paragraphs, lists). The region sets the body type at the subtle tier, the same size as the trigger label, so a link in it is label-sized and set apart by its color and underline. A Response in the region keeps its larger Body Large scale unless you pass size={ResponseSize.Compact}.
Reasoning composes a flush Collapsible, so the trigger, the open and close motion, and the chevron are Collapsible's.
The streaming label is Shimmer with base={ShimmerBase.Readable}, so it rests at the subtle tier and keeps AA text contrast at every point of the sweep. Reasoning needs no prop for it.

Range Slider / Accessibility

Reasoning / API and Development