Feedback
ToolActivity
Discloses observable tool activity and application-owned results.
01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
Read project documentation
View ToolActivity code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { ToolActivity } from '@santi020k/lumen-astro'
---
<ToolActivity label="Read project documentation" open status="success" statusLabel="Two guides retrieved">
<p>The component guide and migration guide are available for the application to use.</p>
</ToolActivity>import { ToolActivity } from '@santi020k/lumen-react'
export const Example = () => (
<>
<ToolActivity label="Read project documentation" open status="success" statusLabel="Two guides retrieved">
<p>The component guide and migration guide are available for the application to use.</p>
</ToolActivity>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-tool-activity label="Read project documentation" open status="success" status-label="Two guides retrieved">
<p>The component guide and migration guide are available for the application to use.</p>
</lumen-tool-activity>02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add ToolActivitylumen add ToolActivitypnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add ToolActivity --target reactlumen add ToolActivity --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add ToolActivity --target elementslumen add ToolActivity --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| label, statusLabel | string | required | Names the actual application tool step and its localized status. |
| status | "queued" | "running" | "success" | "error" | "canceled" | "queued" | Application-owned execution state. |
| open | boolean | false | Controls a native keyboard-operable disclosure. Children describe observable tool results. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |