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

Presents timestamps, delivery state, supporting content, and actions for a Chat message.

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 Metadata belongs to a message turn in the Chat family. It renders only when a timestamp, status, footer, or action is present.

import "@nordhealth/components/lib/ChatMessageMetadata"

Composition

Chat Message Metadata is the optional supporting row for one Chat Message. It combines timestamp, delivery status, footer, and action regions, inherits sender-aware alignment from the surrounding turn, and preserves consumer-owned content and controls.

Examples

Time and delivery state

Use timestamp for short static text, or place a localized Nord Timestamp in the timestamp slot. Delivery states are sending, sent, delivered, read, and error. The component supplies visible status wording and symbols so progress and failure do not depend on color alone.

Use the footer slot for supporting detail and the actions slot for message-specific controls. Actions remain normal consumer-owned elements with their own labels, focus, and event behavior.

Accessibility

Keep timestamp wording concise and use the Timestamp component when the full machine-readable time matters. Give icon-only actions accessible names, and avoid repeating information already present in the message’s accessible label.

API reference

ChatMessageMetadata

Chat Message Metadata presents optional timestamps, delivery state, footer content, and actions without recreating consumer-owned controls.

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

Props

PropertyAttribute Description TypeDefault
timestamptimestampDisplay-ready timestamp text.string | undefined—
statusstatusCurrent delivery status.ChatMessageStatus | undefined—

Slots

Slot name Description
timestampConsumer-formatted timestamp content, taking precedence over the string property.
footerAdditional message details such as an edited marker.
actionsConsumer-owned message actions.
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.