Tool.
What the model called, and what came back.
A tool call as a collapsed card: the tool's name and a state badge, with the input, output or error inside. States match the AI SDK's tool part states.
Make it yours
Preparing the example…
Composition
AnatomyObjects are shown as formatted JSON; pass an element to render a richer result. Override badge text with stateLabels, for example Cancelled for a stopped call.
Tool.Root — Collapsible.Root
├── Tool.Header (name, state, stateLabels) — trigger + Badge
└── Tool.Content — Collapsible.Panel
├── Tool.Input — JSON
├── Tool.Output — JSON or a React element
└── Tool.ErrorA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesStates
Compare enabled and disabled navigation.
Loading source…
The finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native and Base UI Collapsible props are forwarded; this table covers the options Dixy adds.
ToolHeader
| Prop | Type / description | Default |
|---|---|---|
name* | ReactNodeThe tool's name, e.g. "get_weather". | — |
state* | "input-streaming" | "input-available" | "approval-requested" | "approval-responded" | "output-available" | "output-error" | "output-denied"Lifecycle state, using the AI SDK's tool part states. | — |
stateLabels | Partial<Record<ToolState, string>>Override the state badge's text, e.g. for localisation. | — |
icon | ReactNodeReplace the leading icon. | — |
ToolSection
| Prop | Type / description | Default |
|---|---|---|
children | unknownShown as formatted JSON unless it is already a string or element. | — |
title | ReactNodeSection heading. | — |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-color-background-action-destructive-subtle | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityThe state is text in a badge, not color alone, and it is part of the trigger's accessible name. Errors are not alerts: the panel mounts when the reader opens it, and the badge already reports the failure.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
An alert inside a disclosure fires when the reader opens it, which is exactly when they least need interrupting. Report state where it is first seen.
--dixy-color-background-action-destructive-subtle