Circular send/stop toggle button for the chat composer. Place it inside ChatComposer where it reads context automatically: no wiring needed. When streaming starts, the button switches from a primary send icon to a secondary stop icon. Override any context value via props for standalone or custom usage.
Preview loads on approachPreview loads on approach
Exact source · chat-send-button-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {ChatSendButton} from '@astryxdesign/core/Chat';
import {Icon} from '@astryxdesign/core/Icon';
import {Stack} from '@astryxdesign/core/Layout';
import {SparklesIcon} from '@heroicons/react/24/solid';
export default function ChatSendButtonShowcase() {
return (
<Stack direction="horizontal" gap={3} vAlign="center">
<ChatSendButton isDisabled={false} onSend={() => {}} />
<ChatSendButton
isDisabled={false}
onSend={() => {}}
sendIcon={<Icon icon={SparklesIcon} size="sm" />}
/>
<ChatSendButton isStopShown onStop={() => {}} />
</Stack>
);
}
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.
Place ChatSendButton inside ChatComposer when its readiness and send or stop lifecycle should follow composer context.
For standalone use, provide the state and matching onSend or onStop callback explicitly.
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.
Do not render the stop state without a working onStop callback from props or ChatComposer context.
Do not expect isDisabled to disable the stop action; it applies only to the send state.
Typed props
Prop
Type and behavior
isStopShown
boolean
Whether the stop button is shown. Defaults to context value.
isDisabled
boolean
Whether the send button is disabled. Defaults to !canSend from context.
onSend
() => void
Called when the user clicks send. Defaults to context onSubmit.
onStop
() => void
Called when the user clicks stop during streaming. Defaults to context onStop.
sendIcon
ReactNode
Custom icon for the send state. Defaults to arrowUp from icon registry.
