Lily Design System™

ToolCallError

A headless wrapper for the error shown when a tool call fails.

Status: beta — implemented and unit-tested in all eight headless libraries; not yet exercised in composed flows.

The error shown when a tool call fails. A <div role="alert"> so the message is announced when it appears. The component draws, times and animates nothing and carries no strings of its own.

Implementation Notes

  • Root element: <div> with the base class tool-call-error first, then the consumer class
  • restProps spread onto the root; no internal state beyond open on the root

Props

Prop Type Default Description
class string "" Appended to the base class
children slot — The error message
...restProps HTML attributes — Spread onto the root <div>

Usage

<ToolCallError>…</ToolCallError>

Keyboard Interactions

  • None

ARIA

  • role="alert" announces the error when it is added

When to Use

  • The failure message of a tool call
  • Surfacing an error that must be heard immediately

When Not to Use

  • Use ToolCallOutput — for a normal result
  • Use ErrorMessage — a validation message tied to a form field
  • Use ErrorSummary — a page-level summary of form errors

Headless

This component decides semantics only. It decides no colour, icon, spinner, layout, monospace style or motion.

Styles

Target .tool-call-error (and [data-status] where it applies). No default styles are included.

Testing

  • Renders <div> with the base class tool-call-error and appends the consumer class
  • Attribute behaviour as listed under Props and ARIA, each asserted with a test
  • Children render; rest props reach the root

Advice

An alert inside a closed <details> is not announced. Open the ToolCall when status becomes error, or also show the error text in the summary.

Related components

  • tool-call
  • tool-call-output
  • error-message

References

Lily™ and Lily Design System™ are trademarks.

Example

Show demo markup 
<div class="tool-call-error" role="alert">The tool timed out after 30 seconds.</div>
Usage example 
<div class="tool-call-error" role="alert">The tool timed out after 30 seconds.</div>
Show Svelte source 
// In your Svelte component:
import ToolCallError from "lily-design-system-svelte-headless/components/ToolCallError/ToolCallError.svelte";

<ToolCallError>
  <!-- content -->
</ToolCallError>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: tool-call-error
  • PascalCase: ToolCallError
  • Description: the error shown when a tool call fails
  • Status: beta — implemented and unit-tested in all eight headless libraries; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .tool-call-error
  • Interactive: no

ARIA

  • role="alert" announces the error when it is added

Keyboard

  • None

Props

  • class: string -- Appended to the base class
  • children: slot -- The error message
  • ...restProps: HTML attributes -- Spread onto the root <div>