PlayPauseButton

PlayPauseButton displays a play or pause icon based on a boolean value prop. Clicking it sends a POST request to the configured path with the toggled value, then calls onChangeSuccess or onChangeError. A spinner is shown while the request is in progress. When value is true the component renders a pause icon in the primary color; when false it renders a play icon in a lighter text color.

Use it for media controls, workflow state toggles (running/paused), or any active/inactive binary state persisted on the server.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | boolean | Yes | — | Current state. true shows the pause icon; false shows the play icon. | | path | string | Yes | — | API endpoint that receives a POST with { value: boolean } when toggled. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls button and spinner size. | | apiBaseUrl | string | No | — | Base URL override for the HTTP request. | | useAuthToken | boolean | No | false | When true, uses the authenticated HTTP client. | | onChangeSuccess | (newValue: boolean) => void | No | — | Callback fired with the new boolean value after a successful request. | | onChangeError | (error: any) => void | No | — | Callback fired when the request fails. | | className | string | No | — | CSS class applied to the wrapper element. | | style | React.CSSProperties | No | — | Inline styles applied to the wrapper element. |

Usage

Basic

import PlayPauseButton from '@/components/buttons/PlayPauseButton';
import { useState } from 'react';

export default function Example() {
  const [playing, setPlaying] = useState(false);

  return (
    <PlayPauseButton
      value={playing}
      path="/v1/streams/42/toggle"
      useAuthToken
      onChangeSuccess={(val) => setPlaying(val)}
      onChangeError={(err) => console.error(err)}
    />
  );
}

Workflow state control

import PlayPauseButton from '@/components/buttons/PlayPauseButton';

export default function WorkflowRow({ workflow }: { workflow: { id: string; running: boolean } }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>{workflow.id}</span>
      <PlayPauseButton
        value={workflow.running}
        path={`/v1/workflows/${workflow.id}/toggle`}
        useAuthToken
        size="sm"
        onChangeSuccess={(val) => console.log('Running:', val)}
      />
    </div>
  );
}