Skip to main content
PlayButton is a three-state button that toggles between play, pause, and replay. When media reaches the end, clicking it restarts playback from the beginning.
Requires the playback feature to be registered with the player.

​
Import

import { PlayButton } from '@videojs/react';

​
Basic Usage

import { PlayButton } from '@videojs/react';

function PlayerControls() {
  return <PlayButton />;
}

​
Custom Render

Use the render prop to fully customize the button element while keeping all accessibility and state wiring: 
import { PlayIcon, PauseIcon, ReplayIcon } from './icons';
import { PlayButton } from '@videojs/react';

function PlayerControls() {
  return (
    <PlayButton
      render={(props, state) => (
        <button {...props}>
          {state.ended ? (
            <ReplayIcon />
          ) : state.paused ? (
            <PlayIcon />
          ) : (
            <PauseIcon />
          )}
        </button>
      )}
    />
  );
}

​
Props

​
render
ReactElement | ((props: HTMLProps, state: PlayButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state. Use this to render a custom button element or icon set.
​
label
string | ((state: PlayButton.State) => string)
Override the automatic aria-label. By default the label is "Play", "Pause", or "Replay" depending on state.
​
disabled
boolean
Disables the button.
​
className
string | ((state: PlayButton.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: PlayButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

These attributes are reflected on the rendered <button> element and can be used for CSS-based state styling.
AttributeDescription
data-pausedPresent when media is paused.
data-endedPresent when media has ended.
data-startedPresent after the first play. Remains until a new source is loaded.
data-waitingPresent when media is waiting/buffering.

​
CSS Styling Example

/* Paused (but not ended) */
.play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }

/* Playing */
.play-button:not([data-paused]) .pause-icon { display: inline; }

/* Ended */
.play-button[data-ended] .replay-icon { display: inline; }

/* Hide button before first play */
.play-button:not([data-started]) { display: none; }

​
Accessibility

Renders a <button> element. The aria-label updates automatically: "Play", "Pause", or "Replay". Keyboard activation: Enter / Space.

Build docs developers (and LLMs) love

Get started for freeTalk to us