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 Message List Alpha Light DOM & Tailwind

Presents an accessible conversation log with streaming, empty, and older-message states.

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 Message List contains chronological message and system-update nodes within the Chat family. Give each list a concise aria-label and keep consumer content in source order.

import "@nordhealth/components/lib/ChatMessageList"

Composition

Chat Message List is the chronological log within Chat. Consumer-owned Chat Message and Chat System Message nodes remain in DOM order, while empty content, streaming state, and older-message loading change the list state without replacing those nodes.

Examples

Conversation state

The list exposes a polite role="log" which announces additions without repeatedly announcing streamed text mutations. Set streaming while the latest response is incomplete; this adds aria-busy without changing the consumer-owned messages. The empty slot is shown until message rows exist.

Set load-older to enable the leading observer sentinel. It emits one nord-load-more event when eligible, and requestOlder() exposes the same intent for a custom trigger. When used inside Chat, prepending the original older nodes preserves the reader’s visual scroll anchor.

Accessibility

Use one stable label which distinguishes this log from other live regions. Keep actions and messages in chronological DOM order, and use Chat System Message for concise status announcements rather than broadening the log’s live-region behavior.

API reference

ChatMessageList

Chat Message List is an accessible conversation log which preserves direct consumer children and coordinates loading older messages with Chat.

<nord-chat-message-list></nord-chat-message-list>

Props

PropertyAttribute Description TypeDefault
densitydensityOptional density override. Otherwise inherits the surrounding chat density.ChatDensity | undefined—
gapgapOptional Nord spacing token between message rows.ChatMessageListGap | undefined—
loadingloadingWhether older messages are currently loading.booleanfalse
streamingstreamingWhether assistant content is currently streaming.booleanfalse
loadOlderload-olderEnables the top-of-list load intent.booleanfalse

Slots

Slot name Description
Default slotChat messages and system messages in chronological DOM order.
emptyContent shown only when the log has no messages.
EventDetail TypeDescription
nord-load-moreChatLoadMoreEventRequests messages older than the current first item.
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.