Send button | Glaze design system

Sizes

When to use it

Use: A composer sends a prompt and the same spot stops the reply while the agent works.
Use: A custom composer needs the send and stop rules PromptInput already uses.
Not for: The whole composer is wanted: text, attachments, model picker and send. Use Prompt input.
Not for: The action is not sending a message, such as Run or Publish. Use Button.

6 rules

Must: Set status="submitted" the moment the prompt leaves, before any byte comes back, so the button is already Stop. Because a button that stays Send or goes disabled while a request is in flight leaves a slow or stuck run with no way to cancel it.
Must: Pass the run id as generation and settle only the run onStop names. Because Stop fires once per generation; without one a late stop echo from the last run can cancel the next.
Never: Put a second primary Button (ink, coral or green) in the composer beside it; attach, the mic and the model picker are variant="ghost". Because Send is the composer's one glass key, and a second glass pill beside it splits the eye.
Must: Use blockedReason, with the same words in visible text beside it, when uploads or a failed file stop the send. Because blockedReason keeps the button focusable with its reason as the description; a bare disabled button tells nobody why.
Never: Pass children, a variant or a label of your own; it draws the arrow and the square and names itself. Because its name follows its state (Send, Stop, Stopping, Send again) and a label in children never changes with it.
Must: Say a failed send in words next to it; status="error" only renames it Send again. Because the key stays ink, since coral glass means an action that cannot be undone, so without the words nothing says it failed.

9 states, highest first

4 checks

: Its name is the state: Send, Stop, Stopping or Send again; the glyph is aria-hidden.
: aria-keyshortcuts says Enter while ready and Escape while working.
: Blocked stays in the tab order with the reason as its description; stopping sets aria-busy and keeps focus.
: Focus is the 2px ink ring on every state.

1 key

4 edge cases

Double click on Stop: The second press is dropped; onStop runs once for the generation.
A new run starts while stopping: A new generation re-arms Stop for that run.
Dark theme: The ink glass turns light with an ink arrow; disabled is the same flat grey pill.
Forced colors: The glass drops to ButtonText edges; the stop square takes CanvasText.

7 props

status: 'ready' | 'submitted' | 'streaming' | 'stopping' | 'error' default 'ready'
onStop: (generation) => void
generation: string | number
empty: boolean default false
blockedReason: string
size: 'icon-sm' | 'icon' | 'icon-lg' default 'icon-sm'
labels: {send, stop, stopping, sendAgain} default English

10 tokens