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 Dictation Button Alpha

Captures speech-to-text input through a framework-neutral Chat action.

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 Dictation Button is the speech data-capture control for the Chat family. It feature-detects standard and prefixed Web Speech recognition and exposes start(), stop(), abort(), and toggle() methods.

import "@nordhealth/components/lib/ChatDictationButton"

Composition

Recognition and integration

Every interim and final update emits nord-transcript; final text also emits nord-dictation-result. Insert final text through Composer Input’s public insertText() method rather than reaching into its Shadow DOM. Repeated starts are ignored, and aborting, disabling, or disconnecting releases recognition listeners.

Examples

Unsupported recognition

The default unsupported-behavior="hide" renders no control when recognition is unavailable. Use disable for a labelled fallback, but always retain ordinary keyboard input.

Accessibility

The owned Nord Button exposes localized labels, pressed/listening state, keyboard activation, and errors. Request microphone access only after explicit user activation. Speech recognition may send audio to a browser, operating system, or remote provider, so disclose the applicable privacy behavior at the point of use.

API reference

ChatDictationButton

Starts and stops speech-to-text capture for a chat composer. Speech can be sent to a browser or platform recognition service: disclose that privacy behavior, request microphone access only after the user's activation, and do not start capture automatically. Always retain keyboard text entry as the fallback when Web Speech is unsupported or permission is denied. Every final transcript emits nord-dictation-result. Composer integration should listen for that event and call Composer Input's public insertText() method; this component never reaches through another element's Shadow DOM. The same methods and bubbling events work from plain HTML, React, Vue, Svelte, Angular, or any other DOM-capable framework.

<nord-chat-dictation-button></nord-chat-dictation-button>

Props

PropertyAttribute Description TypeDefault
unsupportedBehaviorunsupported-behaviorUnsupported browsers either hide the control or expose a disabled fallback.ChatDictationUnsupportedBehavior'hide'
disableddisabledDisables dictation even when the recognition API is available.booleanfalse
sizesizeNord small or medium button and equalizer geometry.ChatDictationButtonSize'm'
recognitionLangrecognition-langBCP-47 language sent to speech recognition. Defaults to navigator.language.string | undefined—
continuouscontinuousKeep recognition active until explicitly stopped.booleantrue
interimResultsinterim-resultsRequest interim transcript updates.booleantrue
labellabelOptional accessible label override for both idle and listening states.string | undefined—

Methods

Method nameParameters Description
focus(options?: FocusOptions) => voidoptions: FocusOptions
EventDetail TypeDescription
nord-transcriptChatTranscriptEventEvery interim and final transformed transcript.
nord-dictation-resultChatDictationResultEventFinal transformed transcript for application/composer integration.
nord-dictation-startChatDictationStartEventRecognition began listening.
nord-dictation-endChatDictationEndEventRecognition stopped, aborted, or ended.
nord-dictation-errorChatDictationErrorEventPermission or recognition failure.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-chat-dictation-button-sizeOverrides the Nord Button square size.—