Chat Send Button Component

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 Send Button can coordinate with the nearest Chat Composer or operate independently. See the Chat family guide for complete composition and submission behavior.

import "@nordhealth/components/lib/ChatSendButton"

The default send state uses a primary Nord Button and emits cancelable nord-submit when standalone. Set stop-shown to switch to a danger stop action which emits cancelable nord-stop. Inside Composer, the private context supplies current value, loading, availability, and stop behavior.

Examples

Labels and icons

Use send-label and stop-label to replace the localized accessible names. Custom icons belong in the send-icon and stop-icon slots; they are decorative because the button label remains authoritative.

Accessibility

The owned Nord Button provides keyboard activation, focus treatment, disabled behavior, and busy state. Do not disable the stop action merely because sending is loading; disable it explicitly only when stopping is unavailable.

Templates

See this component composed into complete application views:

AI Assistant Template

A streaming assistant conversation with tool calls, dictation, attachments and a suggested-prompt empty state.

Ready

Conversations Template

A responsive inbox and message thread with resizable panels, overflow-aware actions and a persistent composer.

Ready

API reference

ChatSendButton

Nord Button-based send/stop action for standalone use or Composer coordination.

<nord-chat-send-button></nord-chat-send-button>

Props

Property	Attribute	Description	Type	Default
`stopShown`	`stop-shown`	Shows stop rather than send behavior.	`boolean`	`false`
`disabled`	`disabled`	Disables send behavior. Stop remains available unless explicitly disabled.	`boolean`	`false`
`loading`	`loading`	Exposes pending send state and disables sending.	`boolean`	`false`
`sendLabel`	`send-label`	Accessible label in send state.	`string \| undefined`	—
`stopLabel`	`stop-label`	Accessible label in stop state.	`string \| undefined`	—
`type`	`type`	Native button type when sending.	`'submit' \| 'button'`	`'submit'`

Slots

Slot name	Description
`send-icon`	Custom send-state icon.
`stop-icon`	Custom stop-state icon.

Event	Detail Type	Description
`nord-submit`	`ChatComposerSubmitEvent`	Standalone send intent.
`nord-stop`	`ChatComposerStopEvent`	Standalone stop intent.

CSS Properties

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

Property	Description	Default
`--n-chat-send-button-size`	Square action size.	`var(--n-space-xl)`

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.

Dependencies

This component is internally dependent on the following components:

Chat Send Button Alpha Light DOM & Tailwind