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

Safely reconstructs known Chat tokens from a canonical serialized string.

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 Tokenized Text renders read-only output which shares token definitions with Composer Input. It belongs to the Chat family but can be used wherever serialized composer text needs safe display.

import "@nordhealth/components/lib/ChatTokenizedText"

Composition

Set value to the canonical plain string and tokens to known token definitions.

Examples

Token reconstruction

Only exact boundary-matched values become Chat Composer Token elements. Unknown values, overlapping definitions, and hostile strings remain ordinary text rather than being interpreted as markup.

Accessibility

The component preserves reading order and exposes token labels as text. Definitions should use human-readable labels, and surrounding copy should not depend on token color to communicate meaning.

API reference

ChatTokenizedText

Safely reconstructs known Composer Tokens from a canonical serialized string. It creates only text nodes and token elements and never parses consumer HTML. Consumer children are left untouched. When both meaningful consumer content and value exist, consumer content wins so output is never duplicated. Token values match only at word/marker boundaries, never inside larger words.

<nord-chat-tokenized-text></nord-chat-tokenized-text>

Props

PropertyAttribute Description TypeDefault
valuevalueCanonical plain-text message to render.string | undefined—
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.