# ChatSendButton

Send/stop button for a chat composer. Reuses the existing `Button` and `Icon` rather than a dedicated recipe. See [ChatComposer](/components/chat-composer) 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.

```tsx
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)}
    />
  );
}
```

```astro
---
// No @var-ui/astro ChatSendButton — static Button chrome (send state only).
// Send ↔ stop streaming toggle is React-only.
import { button, resolveButtonProps } from '@var-ui/core';

const send = button(resolveButtonProps({ intent: 'primary' }));
---

<button type="button" class:list={[send]} aria-label="Send message">↑</button>
```

```html
<button type="button" data-tone="accent" data-appearance="filled" data-size="md" data-layout="default" class="var-ui-button" aria-label="Send message"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"></path></svg></button>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| isDisabled | boolean \| undefined | no | false | Disables the button. Ignored while streaming (stop stays pressable). |
| isStreaming | boolean \| undefined | no | false | Whether an assistant reply is currently streaming — swaps send → stop. |
| onPress | (() => void) \| undefined | no |  | Called on press when not streaming. |
| onStop | (() => void) \| undefined | no |  | Called on press while streaming (cancel). |

## Accessibility

`aria-label` switches between "Send message" and "Stop generating" based on `isStreaming`.