Components v5.0.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.See what's new

ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated Chart New Chat New Chat AttachmentChat ComposerChat Composer DrawerChat Composer InputChat Dictation ButtonChat Layout Scroll ButtonChat MessageChat Message BubbleChat Message ListChat Message MetadataChat Send ButtonChat System MessageChat TokenChat Tokenized TextChat Tool CallsCheckboxCollapsible New Combobox New Command MenuData Table New Date PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Rich Text Editor New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

Chat Tool Calls Alpha Light DOM & Tailwind

Displays ordered tool activity with status, result detail, and an accessible disclosure.

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Chat Tool Calls presents function or tool activity within the Chat family. Set the calls JavaScript property to an ordered array and use stable key values while streaming updates.

import "@nordhealth/components/lib/ChatToolCalls"

Composition

Chat Tool Calls renders an ordered snapshot of consumer-provided call records. One call remains inline, while multiple calls share a disclosure; stable keys and status, statistics, and result fields preserve each call’s identity as streaming updates arrive.

Examples

Calls and disclosure

One call stays inline; multiple calls use a summary disclosure which surfaces the latest activity. Statuses are pending, running, complete, error, and unknown. Renderable statistics and result detail accept DOM nodes or primitive text/number values, never framework-owned render values.

Use default-open for initial uncontrolled expansion. For controlled behavior, set open and echo the proposed value from nord-toggle; the event includes the call key when a single call owns the disclosure.

Accessibility

The trigger exposes expanded state and controls a labelled detail region. Statuses include visible wording and symbols, errors remain text-visible, and completion metadata uses Nord readable text roles so meaning survives forced colors. Consumer nodes retain identity, listeners, state, and order across updates.

API reference

ChatToolCalls

Displays ordered LLM tool or function calls. One call stays inline; multiple calls use a summary disclosure whose collapsed surface includes the latest activity. Result nodes remain consumer-owned and are never scoped or cloned. Prefer stable key values during streaming, provide a useful target, show durations only after completion, and include visible errorMessage text. Consumers localize fixed status/summary strings through Nord translations.

<nord-chat-tool-calls></nord-chat-tool-calls>

Props

PropertyAttribute Description TypeDefault
openopenControlled expansion state for the group, or for a single call's detail.boolean | undefined—
defaultOpendefault-openInitial expansion state when open is not controlled.booleanfalse
labellabelOptional localized summary label for a group.string | undefined—
EventDetail TypeDescription
nord-toggleChatToolCallsToggleEventReports the next expansion state. In controlled mode the consumer must echo open back.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-chat-tool-calls-surfaceDisclosure surface color.var(--n-color-surface-raised)
--n-chat-tool-calls-border-colorDisclosure border color.var(--n-color-border)
Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.