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

Groups one speaker’s avatar, name, message fragments, and metadata into an accessible turn.

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 groups one speaker’s content within the Chat family without taking ownership of its child nodes.

import "@nordhealth/components/lib/ChatMessage"

Composition

Chat Message represents one accessible speaker turn. Its avatar and name identify the sender, its default content holds one or more message fragments, and its metadata slot follows that content with supporting state or actions. Sender and density context flow to direct Chat Message Bubble and Chat Message Metadata descendants without moving or replacing consumer nodes.

Examples

Sender and content

Set sender to assistant, user, or system. The message passes sender and density context to direct Chat Message Bubble and Chat Message Metadata descendants, aligning them at the logical edge without reversing source or keyboard order. Use avatar and name for simple sender content, or the corresponding slots for richer presentation.

Place one or more Chat Message Bubble elements in the default content and metadata in the metadata slot. Consumer nodes, listeners, and application state remain unchanged across updates.

Accessibility

The component derives a message label from the sender name when the consumer has not supplied aria-label; a consumer-provided label remains authoritative. Keep the name meaningful, retain chronological DOM order, and do not rely on left/right alignment alone to communicate authorship.

API reference

ChatMessage

Chat Message groups one speaker's avatar, name, bubbles, and metadata without taking ownership of consumer-authored message content.

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

Props

PropertyAttribute Description TypeDefault
sendersenderThe semantic sender of the message.ChatMessageSender'assistant'
densitydensityOptional density override. Otherwise inherits the surrounding chat density.ChatDensity | undefined—
namenameSender name used for the visible label and accessible message name.string | undefined—
avataravatarURL for an owned Nord Avatar. Use the avatar slot for custom content.string | undefined—

Slots

Slot name Description
Default slotMessage bubbles and other consumer-owned message content.
avatarConsumer-provided avatar content, replacing the avatar URL.
nameConsumer-provided sender name.
metadataConsumer-provided message metadata.
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.