ToolCallCard
StableA card that shows one step the assistant took, with its status, how long it took, and what went in and out.
Also known as tool call, tool use, function call, tool
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Pending and running
<div className="w-full max-w-md space-y-2">
<ToolCallCard name="Search the web" status="pending" summary="Waiting to start" />
<ToolCallCard name="Search the web" status="running" summary='Searching "last quarter revenue"' />
</div>A waiting step says Queued. A running step shows a spinner and no time yet.
When to use it
Makes one step the assistant took visible and easy to check. The top line says what it is and how it went; what went in and came out stays folded until someone wants it.
Made of: Status icon · Step name · Summary · Time taken · Status tag · What was sent · What came back
Use it for
- A search, file read or other action the assistant ran.
- A step that failed, with what was sent and what came back.
- A step that is still running.
Not for
- The assistant's reasoning: use ThinkingBlock.
- A list of many steps in a task: use StepTimeline.
- An action that needs the person's approval first: use ApprovalPrompt.
Do and avoid
Do
- Write a summary anyone would understand.
- Update the same card as the step moves from waiting to running to done.
- Show the time taken once the step finishes.
- When a step fails, show what went wrong.
Avoid
- Do not put secrets or personal data in what was sent. It shows as plain text.
- Do not use it to ask for approval. It reports. It does not ask.
- Do not leave a failed step without a note on what to do next.
On a phone
- The name and the summary are each cut to one line with an ellipsis, and the full text is not shown anywhere else on the card.
- The input and output blocks both scroll sideways, and long unbroken strings in the output wrap.
- The whole header is one tap target that opens the details, with a tap area at least 44px tall on touch screens.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | none | Tool identifier, shown in a monospace face. |
| statusrequired | "pending" | "running" | "success" | "error" | none | Drives the icon, the badge label (Queued, Running, Done, Failed) and the badge tone. |
| summary | string | none | One-line human description of what the tool is doing. |
| input | unknown | none | Any value. Shown as indented JSON in the expanded panel when it is not undefined. |
| output | ReactNode | none | Result shown in the expanded panel when it is not null or undefined. |
| durationMs | number | none | Elapsed time in milliseconds, shown in seconds with one decimal. Hidden while running. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ToolCallCard switches all of this from its properties panel, across 16 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Pending, Running, Success, Error |
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
| Name | name | Any text |
| Summary | summary | Any text |
Tokens
Change one of these and every part that uses it follows.
--surface--border--danger--success--surface-sunken--fg-muted--fg-subtle--radius-card
Built in
- The top line is a real button. Screen readers say whether it is open or closed.
- Status is written as a word (Queued, Running, Done or Failed), not shown by icon and color alone.
- While running, the spinner is read as "Loading". The other icons are hidden from screen readers.
- The Tab key can reach the input box, so long lines can be scrolled with the keyboard.
What you need to do
- Announce status changes yourself if they matter, for example from an area that screen readers watch for updates.
- Write the summary in plain words, such as Searching "q3 revenue", so the step makes sense without opening it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide