Send Button

Usage

Place SendButton inside a composer field next to the message input. Storybook shows the control on its own; the composer owns the input, empty-value disabling, and send lifecycle.

disabled is yours: pass it while the value is empty. Pending outranks it, so a composer that clears the value as it sends still shows the spinner.
pending is true while the send is in flight. The arrow becomes a spinner, the button keeps its paint and its focus, and clicks, Enter and Space are ignored.
The send happens on click. A pointer press never takes focus from the input, and a press released off the button sends nothing.
restoreFocusTo returns focus to the input after Enter or Space on the button. Without it, a keyboard send leaves focus on the button.
Inside a form, pass type="submit" and read the form's pending state: pending={useFormPending()}. A pending button never submits.
Pair it with tooltip so sighted users see the name.
The default look is Button's Neutral Soft with a pill radius. Pass intent={ButtonIntent.Accent} and variant={ButtonVariant.Solid} for the emphasized primary look.

When not to use it

The action owns its own promise and result labels: use ActionButton.
The control is not a composer's send: use Button.
The control must stop a running reply: build it on Button; SendButton has no stop state.

Select / Accessibility

Send Button / API and Development

On this page

When not to use it

Send Button

Usage

Place SendButton inside a composer field next to the message input. Storybook shows the control on its own; the composer owns the input, empty-value disabling, and send lifecycle.

disabled is yours: pass it while the value is empty. Pending outranks it, so a composer that clears the value as it sends still shows the spinner.
pending is true while the send is in flight. The arrow becomes a spinner, the button keeps its paint and its focus, and clicks, Enter and Space are ignored.
The send happens on click. A pointer press never takes focus from the input, and a press released off the button sends nothing.
restoreFocusTo returns focus to the input after Enter or Space on the button. Without it, a keyboard send leaves focus on the button.
Inside a form, pass type="submit" and read the form's pending state: pending={useFormPending()}. A pending button never submits.
Pair it with tooltip so sighted users see the name.
The default look is Button's Neutral Soft with a pill radius. Pass intent={ButtonIntent.Accent} and variant={ButtonVariant.Solid} for the emphasized primary look.

When not to use it

The action owns its own promise and result labels: use ActionButton.
The control is not a composer's send: use Button.
The control must stop a running reply: build it on Button; SendButton has no stop state.

Select / Accessibility

Send Button / API and Development

On this page

When not to use it