Response | Glaze design system

Sizes

Order	Amount	Status
ord_4812	$48.00	Refunded
ord_4807	$12.50	Pending

When to use it

Use: An agent's answer arrives as markdown, all at once or a delta at a time.
Use: The answer carries structured tags that render as your own components.
Not for: A file or a command to copy, on its own. Use Code block.
Not for: The model's thinking before the answer. Use Reasoning.

6 rules

Must: Pass the whole text so far as the one string child, and set streaming while more is coming. Because it paces bursts, closes a dangling ** or ` and holds an open tag only while streaming; a list of chunks re-parses as separate answers.
Never: Render the answer as HTML with dangerouslySetInnerHTML or a markdown library that allows raw HTML. Because model output is untrusted; Response never writes raw HTML and drops javascript: and data: links to their label.
Should: Register structured output as tags with a pending label and a render function, not by parsing JSON out of the text yourself. Because a tag shows its placeholder while the JSON is a viable prefix, renders when it completes, and never shows broken JSON.
Never: Restyle code in an answer with font-mono or a text size; Response sets it. Because inline code is mono at 0.8 of the text around it and a fenced block is CodeBlock at type-code, so mono never looks a size bigger.
Should: Use size="sm" inside a dense pane, such as Reasoning or a side panel; the default in a thread. Because sm sets 13px text with 8px between blocks, matching the rows around it.
Must: Keep the inlineTags array stable across renders, defined at module scope or memoised. Because its combined pattern is cached per array, and a new array each render rebuilds it on every delta.

4 checks

: The root sets aria-busy while streaming; the thread announces the end, not each delta.
: Headings render as h3 to h5, so an answer never outranks the page.
: External links open in a new tab with rel="noreferrer noopener"; a refused link keeps its label as text.
: Code blocks keep their header copy button and a focusable scroll body.

6 edge cases

A burst over 512 characters: Drains every 24ms in slices that snap to a word edge; reduced motion and a hidden tab show it at once.
A half-typed ** or link at the live edge: Closed or shown as its label until the rest arrives.
A table whose separator has not arrived: Held back until it can render as a table.
Broken JSON in a tag: Discarded, never shown raw; prose after it still shows.
An unknown tag such as <details>: Stays text and never swallows the lines after it.
Wide table or code: Scrolls in its own box.

8 props

13 tokens