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

Separates conversation sections or announces concise status updates.

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 System Message adds non-speaker context to the Chat family, such as a date divider or connection status.

import "@nordhealth/components/lib/ChatSystemMessage"

Composition

Chat System Message is a non-speaker row within Chat Message List. Its variant controls divider or status presentation, its announcement setting controls live-region behavior, and its icon and default content remain consumer-owned.

Examples

Variants and announcements

Use variant="divider" announce="off" for decorative headings such as dates. Use the default variant with announce="polite" for ordinary background changes. Reserve assertive for genuinely urgent information which must interrupt the current announcement. The icon slot can reinforce status but should not carry the only meaning.

Accessibility

Keep announced copy short and actionable. Do not announce decorative dividers, and avoid duplicating a status already announced elsewhere. Visible text remains the source of meaning in forced-colors and nonvisual use.

API reference

ChatSystemMessage

Chat System Message separates or announces conversation status updates.

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

Props

PropertyAttribute Description TypeDefault
variantvariantVisual treatment for the system message.ChatSystemMessageVariant'default'
announceannounceLive-region priority. Use off for decorative date dividers.ChatSystemMessageAnnouncement'polite'

Slots

Slot name Description
Default slotStatus or divider text.
iconOptional leading icon.
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.