ToolCallCard

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { ToolCallCard } from '@nizivo/react/unstable/tool-call-card';

export function ToolCallCardExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, maxInlineSize: 460 }}>
      <ToolCallCard
        title="Tag products on 3 posts"
        status="running"
        steps={[
          { label: 'Find posts from last week', status: 'done' },
          { label: 'Match products by name', status: 'running' },
          { label: 'Apply tags', status: 'todo' },
        ]}
      />
      <ToolCallCard
        title="Tag products on 3 posts"
        status="done"
        steps={[
          { label: 'Find posts from last week', status: 'done' },
          { label: 'Match products by name', status: 'done' },
          { label: 'Apply tags', status: 'done' },
        ]}
      />
      <ToolCallCard
        title="Tag products on 3 posts"
        status="failed"
        steps={[
          { label: 'Find posts from last week', status: 'done' },
          { label: 'Match products by name', status: 'done' },
          { label: 'Apply tags — Instagram rejected 1 post', status: 'failed' },
        ]}
        actions={
          <Button variant="secondary" size="sm">
            Retry failed step
          </Button>
        }
      />
    </div>
  );
}

ImportCopy Anchor Link

import { ToolCallCard } from '@nizivo/react/unstable/tool-call-card';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/tool-call-card.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript; a retry is a Button you pass in actions. How to choose.

StatusCopy Anchor Link

status is the whole action's: running (a spinner, and the card is aria-busy), done or failed (a critical edge). The pill always carries a word as well as its mark, so the state never rests on colour; under Reduced motion the spinner stands still.

StepsCopy Anchor Link

steps is the plan, in order: each has a label and a status (todo, running, done, failed). A screen reader hears each step's status after its label ("Apply tags, failed"). For a failure, say which step and why in its label, and offer a retry of that step, not of the whole action. Never hide an action the AI took.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

ToolCallCardLabels type

import type { ToolCallCardLabels } from '@nizivo/react/unstable/tool-call-card'

ToolCallCard's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
donerequired	string	'Done'
failedrequired	string	'Failed'
runningrequired	string	'Running'
stepDonerequired	string	'done'
stepFailedrequired	string	'failed'
stepRunningrequired	string	'in progress'
stepTodorequired	string	'not started'	A step not started yet, read after its label.

ToolCallCardProps type

import type { ToolCallCardProps } from '@nizivo/react/unstable/tool-call-card'

The props of ToolCallCard, listed above.

ToolCallStatus type

import type { ToolCallStatus } from '@nizivo/react/unstable/tool-call-card'

The whole action's status.

type ToolCallStatus = "running" | "done" | "failed"

ToolCallStep type

import type { ToolCallStep } from '@nizivo/react/unstable/tool-call-card'

Name	Type	Default	Description
labelrequired	ReactNode	–	What the step does: "Find posts from last week"; for a failure, also why.
statusrequired	ToolCallStepStatus "todo" | "running" | "done" | "failed"	–

ToolCallStepStatus type

import type { ToolCallStepStatus } from '@nizivo/react/unstable/tool-call-card'

One step's status.

type ToolCallStepStatus = "todo" | "running" | "done" | "failed"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-glyph-spinner, .nz-tool-call-card, .nz-tool-call-card-actions, .nz-tool-call-card-header, .nz-tool-call-card-icon, .nz-tool-call-card-status, .nz-tool-call-card-status-icon, .nz-tool-call-card-status-text, .nz-tool-call-card-step, .nz-tool-call-card-step-icon, .nz-tool-call-card-steps, .nz-tool-call-card-title, .nz-tool-call-card-todo.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.