Reasoning | Glaze design system

States

thinking
Checking the refund policy
Damaged items are refunded in full within 30 days. The order shipped 6 days ago.
Confirming the amount
The order total is $48.00 with no shipping charge.
thinking with heading
folded
Checking the refund policy
Damaged items are refunded in full within 30 days. The order shipped 6 days ago.
Confirming the amount
The order total is $48.00 with no shipping charge.
open
stopped early
hover
focus-visible

When to use it

Use: A model streams its reasoning before the answer and the person may want to read it.
Use: A turn should keep the answer on screen and the thinking one line away.
Not for: The steps are tool calls with results. Use Tool call.
Not for: A plain section anyone can open, not tied to a stream. Use Collapsible.

6 rules

Must: Drive it with streaming, not open: it opens while the reasoning streams and folds when it ends. Because controlled open turns off the automatic fold and the person's pin, so the thinking stays over the answer or never shows.
Must: Pass duration in seconds once the reasoning ends. Because the folded line reads "Thought for 12s"; milliseconds read as hours and no duration reads "a moment".
Should: Pass summary parts as an array of strings; the label follows the first heading of the newest part. Because a joined string labels the trigger with the first heading of the whole text, which goes stale as new parts arrive.
Never: Put the answer inside Reasoning; it sits above Response in the turn. Because the fold hides its body when the reasoning ends, so an answer inside it disappears.
Never: Restyle the trigger as a button with a fill or glass; it is a flat row like a folded tool group. Because it shows text, it does not act, and the turn's rows share one column and one look.
Should: Keep Reasoning in the turn when a run stops before any reasoning arrives. Because its line then reads "Stopped before thinking", which says why there is no answer.

5 states, highest first

3 checks

: The trigger is a button with aria-expanded; the arc beside it is aria-hidden and the label says Thinking.
: The body is marked aria-busy while it streams and takes a tab stop only when it scrolls.
: Focus is the inset ink ring on the row.

1 key

5 edge cases

Person closes it while streaming: It stays closed until the next stream.
Person reopens it after the fold: It opens from the top and stays open.
Long reasoning: The pane is 160px tall at most and follows new text until the person scrolls up.
59.6 seconds: Reads "1m 00s", never "60s".
Reduced motion: The arc stands still and the caret jumps.

6 props

children: string | string[] | ReactNode
streaming: boolean default false
duration: number
heading: string default from the text
defaultOpen, open, onOpenChange: boolean, boolean, (open) => void default false
labels: {thinking, stoppedEarly, thoughtFor, moment} default English

11 tokens