Stop Cancel Control

Controls

Interrupt controls for AI processing operations with stop and cancel options. Provides users with the ability to halt long-running AI tasks with optional confirmation dialogs.

Preview

Click to stop AI processing

Variants

Different control styles for various UI contexts

Button Variant

Inline Variant

AI is analyzing your data

Floating Variant (fixed position)

The floating variant appears fixed in the bottom-right corner of the screen

With Confirmation

Require confirmation before stopping critical operations

Props

StopCancelControl component API reference

Prop	Type	Default	Description
`onStop*`	`() => void`	—	Handler for stop action
`onCancel`	`() => void`	—	Handler for cancel action
`variant`	`'button' \| 'floating' \| 'inline'`	`'button'`	Display variant
`showBoth`	`boolean`	`false`	Show both stop and cancel buttons
`isProcessing`	`boolean`	`true`	Whether AI is currently processing
`confirmBeforeStop`	`boolean`	`false`	Show confirmation before stopping
`processingText`	`string`	`'AI is processing'`	Custom processing status text

Usage

Import and implementation example

import { StopCancelControl } from '@/blocks/ai-tools/stop-cancel-control'

export default function Example() {
  const [isProcessing, setIsProcessing] = useState(true)

  const handleStop = () => {
    // Gracefully stop the AI process
    setIsProcessing(false)
  }

  const handleCancel = () => {
    // Immediately cancel and discard results
    setIsProcessing(false)
  }

  return (
    <StopCancelControl
      variant="button"
      onStop={handleStop}
      onCancel={handleCancel}
      showBoth
      isProcessing={isProcessing}
      confirmBeforeStop
      processingText="Analyzing document..."
    />
  )
}

Features

Built-in functionality

Three variants: Button, floating overlay, and inline controls
Stop & Cancel: Graceful stop and immediate cancel options
Confirmation dialog: Optional confirmation before stopping critical operations
Processing state: Visual indicator for active operations with spinner
Custom text: Customizable processing status message
Auto-hide: Component hides when not processing
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Stop and Cancel are native button elementsConfirmation dialog uses standard button semanticsFloating variant maintains focus management

Keyboard Navigation

Key	Action
`Tab`	Navigate between stop and cancel buttons
`Enter / Space`	Activate the focused button
`Escape`	Cancel confirmation dialog

Notes

Processing state indicated by spinner animation
Button text clearly indicates action
Confirmation dialog explains consequences
Color provides additional visual distinction

Related Components

AI Streaming Text AI Thinking Indicator Regenerate Control AI Chat Message