Usage

Use ChatSendButton as ChatComposer’s send control when the action should switch between sending and stopping. Inside ChatComposer it reads readiness, streaming state, and action callbacks from context; standalone usage supplies those values explicitly.

import { ChatSendButton } from '@astryx-vue/core/Chat'

Anatomy

Element	Description
Action button	Circular icon-only Button that exposes the translated Send or Stop name and carries the chat-send-button theme target.

Best practices

Guidance	Practices
Do	Place ChatSendButton inside ChatComposer when its readiness and send or stop lifecycle should follow composer context.
Do	For standalone use, provide the state and matching send or stop listener explicitly.
Do	Keep the translated Send or Stop accessible name intact when supplying custom icon artwork; the icon is decorative and must not be the only name source.
Don't	Render the stop state without a working stop handler from props or ChatComposer context.
Don't	Expect isDisabled to disable the stop action; it applies only to the send state.

Examples

Common configurations, variations, and states.

ChatSendButton — Custom Icon

Custom icons for send and stop states

Send buttons with custom icons via sendIcon and stopIcon props. Use to match the personality of the chat experience: a paper airplane for messaging, sparkles for AI generation, or a check mark for confirmation flows.

ChatSendButton — In Composer

Type a message…

Send button inside ChatComposer, where it reads state from context automatically. No wiring needed; the button enables when the input has content.

ChatSendButton — States

Disabled → Ready → Streaming

Disabled, ready, and streaming states at both sizes. The button automatically toggles between send (primary) and stop (secondary) based on streaming state.