Skip to content
Chat

ChatSendButton

Send/stop button for a chat composer.

ChatSendButton

Send/stop button for a chat composer. Reuses the existing Button and Icon rather than a dedicated recipe. See ChatComposer for the full composer wiring.

Examples

Default

There is no @var-ui/astro ChatSendButton — Astro and HTML show a static send-state button; the streaming send/stop toggle is React-only.

Demo.tsxtsx
import { useState } from 'react';
import { ChatSendButton } from '@var-ui/react';

function SendToggle() {
  const [isStreaming, setIsStreaming] = useState(false);
  return (
    <ChatSendButton
      isStreaming={isStreaming}
      onPress={() => setIsStreaming(true)}
      onStop={() => setIsStreaming(false)}
    />
  );
}

Props

Accessibility

aria-label switches between “Send message” and “Stop generating” based on isStreaming.