import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as SendButtonStories from './SendButton.stories';
<Meta of={SendButtonStories} name='Usage' />
<Title />
## Purpose
Submits a prompt, shows that the request is running, and stops a running response.
## Usage
Use it as the submit control in a chat input or similar prompt field.
- **send** submits the prompt. **working** shows the request is in flight and is disabled. **stop** cancels a running response.
- Use `disabled` while the prompt is empty.
- Switch to **stop** only when stopping is actually possible.
- `ariaLabel` is required and should describe what the button does in its current state (for example "Send" or "Stop"), so update it when the state changes.
- It is square and filled, with the primary button colors and the `IconButton` shape and sizes.
## Implementation
See the table below for the available props. The other stories show every variant and state.
<hr />
<Canvas of={SendButtonStories.Default} />
<Controls of={SendButtonStories.Default} />
Send Button
A square, filled icon button (primary Button colors, IconButton shape and sizes) with three states:
Net-new componentOpen in Storybook