Run Button

A play and stop button with a progress ring.

"use client";

import { useEffect, useState } from "react";

import { WorkflowRunButton } from "../components/workflow-run-button";
import type { WorkflowRunPhase } from "../types/workflow";

const DURATION_MS = 4000;

export default function WorkflowRunButtonExample() {
  const [phase, setPhase] = useState<WorkflowRunPhase>("idle");
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (phase !== "running") {
      return;
    }
    const started = performance.now();
    const id = window.setInterval(() => {
      const next = (performance.now() - started) / DURATION_MS;
      setProgress(Math.min(next, 1));
      if (next >= 1) {
        setPhase("done");
      }
    }, 50);
    return () => window.clearInterval(id);
  }, [phase]);

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <WorkflowRunButton
        onPlay={() => {
          setProgress(0);
          setPhase("running");
        }}
        onStop={() => setPhase("idle")}
        phase={phase}
        progress={progress}
      />
      <WorkflowRunButton disabled phase="idle" />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-run-button

WorkflowRunButton is its own button built on the Base UI Button primitive, so it leaves your shadcn Button alone. It reads Run workflow, then Stop with a ring that fills with progress, then Run again.

Prop	Default	Description
`phase`		`idle`, `running` or `done`.
`progress`	`0`	From 0 to 1.
`onPlay`		Called from idle and done.
`onStop`		Called while running.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.