Tool Call Chip
An agent-activity chip — tool action label plus muted result meta, optionally rendered as a button.
- Status
- Since
0.3.0- Accessibility pattern
- non-interactive label
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Tool Call Chip before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify tool-call-chipInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/tool-call-chipRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
The same command installs the registry items it composes: @vegastack/badge.
Usage
import { ToolCallChip } from "@/components/ui/tool-call-chip";
<ToolCallChip label="SQL query executed" meta="3 rows in 495ms">
<Database aria-hidden />
</ToolCallChip>;It is a Badge
The chip IS Badge in its outline variant — the height, the radius, the
border and the icon rule all come from there, so a tool call and any other chip in the same
transcript are one object rather than two chip recipes. What this component adds is the label/meta
split, a truncation posture a badge does not need (a tool label runs long), and the hover and
pressed steps the interactive form needs, since upstream's outline badge paints a hover for anchors
only.
Chat family
Sits alongside Marker (status lines), Attachment (files/artifacts), and CodeBlock
(results) — the four pieces that turn a Message stream into an agent transcript, laid out by
Message.
Examples
States
Compose the leading slot per state: a Spinner while the tool runs (label only, no meta yet),
the tool's icon once finished (label + result meta). The chip itself never animates — arrival
into a transcript can opt into motion-enter-up at the call site.
Interactive chips
Pass render={<button />} when activating the chip reveals the call's detail (arguments,
raw result). The accessible name is built from the visible text, so it needs no aria-label: the
label and the meta are flex children, so the browser separates their contributions itself and the
button is named Search files 1.2s.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label* | React.ReactNode | — | The action label — ink voice ("Attributes searched"). |
meta | React.ReactNode | — | Muted result meta after the label ("2 results", "3 rows in 495ms"). |
render | useRender.RenderProp<Record<string, unknown>> | — | Render the chip as a different element (e.g. render={<button />} when the
chip expands the call's detail) via Base UI render composition. |
Data attributes and CSS variables on ToolCallChip
| Attribute | Values |
|---|---|
data-slot | "tool-call-chip" | "tool-call-chip-meta" |
Accessibility
- The visible label names the tool action;
metasupplements it with a result summary. - Leading glyphs stay decorative because the text carries state and meaning.
- When composed as a button the accessible name comes from the visible text — label then meta,
separated by the browser's own accname handling of flex children rather than by an
aria-label. The visible label therefore stays a verbatim substring of the name, so speech input still works (WCAG 2.2 SC 2.5.3).
| Key | Action |
|---|---|
| Tab | Move to an interactive chip; static chips are skipped. |
| Enter / Space | Activate a chip composed as a button. |
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | semantic-html |
| Visual | default, hover |