# Chat Send Button

## 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.

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

### Anatomy

- **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

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.

```vue
<script setup lang="ts">
import { ChatSendButton } from '@astryx-vue/core/Chat'
import { Icon } from '@astryx-vue/core/Icon'
import { HStack, VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <VStack :gap="4">
    <Text type="supporting" color="secondary">
      Custom icons for send and stop states
    </Text>
    <HStack align="center" :gap="4">
      <ChatSendButton :is-disabled="false">
        <template #sendIcon>
          <Icon name="heroicons:paper-airplane-solid" />
        </template>
      </ChatSendButton>
      <ChatSendButton :is-disabled="false">
        <template #sendIcon>
          <Icon name="heroicons:check-solid" />
        </template>
      </ChatSendButton>
      <ChatSendButton :is-disabled="false">
        <template #sendIcon>
          <Icon name="heroicons:sparkles-solid" />
        </template>
      </ChatSendButton>
      <ChatSendButton is-stop-shown>
        <template #stopIcon>
          <Icon name="heroicons:x-circle" />
        </template>
      </ChatSendButton>
    </HStack>
  </VStack>
</template>
```

### ChatSendButton — In Composer

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

```vue
<script setup lang="ts">
import { ChatComposer } from '@astryx-vue/core/Chat'
import { ref } from 'vue'

const value = ref('Hello, how can you help?')
</script>

<template>
  <ChatComposer v-model="value" />
</template>
```

### ChatSendButton — States

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

```vue
<script setup lang="ts">
import { ChatSendButton } from '@astryx-vue/core/Chat'
import { HStack, VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <VStack :gap="2">
    <Text type="supporting" color="secondary">
      Disabled → Ready → Streaming
    </Text>
    <HStack align="center" :gap="3">
      <ChatSendButton is-disabled />
      <ChatSendButton :is-disabled="false" />
      <ChatSendButton is-stop-shown />
    </HStack>
  </VStack>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isStopShown` | `boolean` | Composer's value | Shows stop instead of send. Leave it unset inside a composer and the shell decides. |
| `isDisabled` | `boolean` | Inverse of whether the draft can be sent | Disables send. Does not disable stop. Leave it unset inside a composer to follow the shell's readiness. |
| `size` | `'sm' \| 'md'` | `'md'` | Button size, forwarded to `Button`. |

## Events

| Event | Payload | Description |
| --- | --- | --- |
| `send` | — | Send was activated. Inside a composer without this listener the current draft is submitted for you. |
| `stop` | — | Stop was activated. Inside a composer without this listener the shell's stop action runs. |
| `click` | `MouseEvent` | Follows the send or stop action. |

## Slots

| Slot | Description |
| --- | --- |
| `sendIcon` | Replaces the up arrow. |
| `stopIcon` | Replaces the stop square. |