nteract elements

ExecutionStatus

A badge component that displays the execution state of a notebook cell

Queued
Running
Error

A cell primitive that displays the current execution state of a notebook cell. Returns appropriate badges for queued, running, and error states, or nothing for idle.

Installation

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

Copy the component from nteract/elements.

Usage

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

export function CellHeader() {
  return (
    <div className="flex items-center gap-2">
      <span>[1]:</span>
      <ExecutionStatus executionState="running" />
    </div>
  )
}

States

Idle

Returns null - no badge is displayed when the cell is idle.

No badge shown:
<ExecutionStatus executionState="idle" />

Queued

Queued
<ExecutionStatus executionState="queued" />

Running

Displays a spinning indicator alongside the "Running" text.

Running
<ExecutionStatus executionState="running" />

Error

Error
<ExecutionStatus executionState="error" />

Props

PropTypeDefaultDescription
executionStatestringThe execution state: "idle", "queued", "running", or "error"

On this page