ToolCallCard
Collapsible card that renders one agent tool call — a status header with the tool name and JSON input/output (or an error) in the body. Opens itself on failure.
{
"city": "Berlin",
"unit": "celsius"
} 01 Examples
Lifecycle: running to complete
{
"city": "Berlin",
"unit": "celsius"
} Failure opens itself
permission denied for relation "invoices" (SQLSTATE 42501)
{
"sql": "SELECT * FROM invoices WHERE due < now()"
} Domain-specific body via the children snippet
- 94%
OKLCH in CSS: why we moved
example.com/oklch
- 87%
A perceptual color picker
example.com/picker
- 71%
Gamut mapping explained
example.com/gamut
02 Accessibility
Status is text, not just color
The spinner and the status Badge are decorative (aria-hidden). The header carries a single sr-only line with the current state label (Pending / Running / Done / Failed), so assistive tech reads the status once
and never announces a spinner as content.
Disclosure semantics
The header is a real <button> with aria-expanded and aria-controls pointing at the body region — the
same Collapsible contract as the rest of the library. Tab to reach it, Enter or Space to toggle. Focus rings use focus-visible:.
Untrusted output
Input and output render as plain text inside CodeBlock, never as interpreted HTML — tool results are untrusted data.
03 API Reference
No matching properties |