← All proposals

Send Button

A square, filled icon button (primary Button colors, IconButton shape and sizes) with three states:

Net-new componentOpen in Storybook

proposals/SendButton/SendButton.mdx31 lines · View on GitHub
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} />