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

Returns the reader to the newest Chat content and surfaces unseen-message state.

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 Layout Scroll Button is the scroll affordance for the Chat family. Place it in Chat’s scroll slot; the surrounding Chat component supplies lock and unseen-message state while preserving the button as an ordinary keyboard action.

import "@nordhealth/components/lib/ChatLayoutScrollButton"

Composition

Chat Layout Scroll Button is a Nord Button-backed action in Chat’s scroll slot. Chat owns automatic visibility and unseen-message state, while the component owns its label and icon presentation and exposes activation without replacing ordinary button interaction.

Examples

Visibility and labels

Without visible, Chat shows the button when the reader leaves the newest content or new messages arrive. Add visible only for an explicit override, and remove the attribute to return control to the layout. Set label for visible copy such as “3 new messages”; the icon-only state retains a localized accessible name.

Activation emits cancelable nord-scroll-to-latest. When it is not canceled, the nearest Chat component scrolls to the bottom and clears its unseen-message state.

Accessibility

The component internally uses Nord Button and Icon, so Enter, Space, focus treatment, and disabled browser semantics remain consistent with other Nord actions. A hidden affordance is made inert and removed from the accessibility tree, but it remains visible until focus leaves if it was focused during a state change.

API reference

ChatLayoutScrollButton

Chat Layout Scroll Button composes the existing Nord Button and Nord Icon to return the reader to the newest content. It can inherit visibility and new-message state from Chat.

<nord-chat-layout-scroll-button></nord-chat-layout-scroll-button>

Props

PropertyAttribute Description TypeDefault
visibilityvisibilityAnything that is not an explicit override resolves to auto, including the null Lit hands back when the attribute is removed. The property is then always one of the three documented values rather than sometimes null.ChatLayoutScrollButtonVisibility—
labellabelVisible button label. Omit it for a localized icon-only control.string | undefined—
EventDetail TypeDescription
nord-scroll-to-latestChatScrollToLatestEventCancelable scroll-to-latest intent.
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.