PlayButton

Cell execution control button that shows Play, Stop, or Loading states based on execution state

A button component for executing notebook cells. Shows different icons based on the current execution state:

Play icon when idle, completed, or in error state
Square (stop) icon when running or queued
Loader spinner when auto-launching the runtime

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/play-button.json

Copy from nteract/elements.

Usage

import { PlayButton } from "@/registry/cell/PlayButton"

export function CellToolbar() {
  return (
    <PlayButton
      executionState="idle"
      cellType="code"
      onExecute={() => console.log("Execute cell")}
      onInterrupt={() => console.log("Interrupt execution")}
    />
  )
}

Examples

Idle State

<PlayButton
  executionState="idle"
  cellType="code"
  onExecute={handleExecute}
  onInterrupt={handleInterrupt}
/>

Running State

<PlayButton
  executionState="running"
  cellType="code"
  onExecute={handleExecute}
  onInterrupt={handleInterrupt}
/>

Auto-launching

<PlayButton
  executionState="idle"
  cellType="code"
  onExecute={handleExecute}
  onInterrupt={handleInterrupt}
  isAutoLaunching
/>

Focused State

<PlayButton
  executionState="idle"
  cellType="code"
  isFocused
  onExecute={handleExecute}
  onInterrupt={handleInterrupt}
/>

Props

Prop	Type	Default	Description
`executionState`	`"idle" \| "queued" \| "running" \| "completed" \| "error"`	—	Current execution state of the cell
`cellType`	`string`	—	Type of cell (e.g., "code", "markdown") for tooltip
`isFocused`	`boolean`	`false`	Whether the cell is focused
`onExecute`	`() => void`	—	Callback when play button is clicked
`onInterrupt`	`() => void`	—	Callback when stop button is clicked
`className`	`string`	`""`	Additional CSS classes
`focusedClass`	`string`	`"text-foreground"`	CSS class applied when focused
`isAutoLaunching`	`boolean`	`false`	Shows loading spinner and disables button

PlayButton

On this page