Looking for the old docs? Go here

Buttons

Play Button

This component is used to play and pause media on press.

This page is not ready yet, we’re working on getting it done for the 1.0 release. It should be available soon! In the meantime, feel free to use the API reference tables below.

HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

A button for toggling the playback state (play/pause) of the current media.

import { PlayButton, type PlayButtonProps } from "@vidstack/react";
import { PlayButton, type PlayButtonProps } from "@vidstack/react";
const isPaused = useMediaState('paused');

<PlayButton>
  {isPaused ? <PlayIcon /> : <PauseIcon />}
</PlayButton>
const isPaused = useMediaState('paused');

<PlayButton>
  {isPaused ? <PlayIcon /> : <PauseIcon />}
</PlayButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
NameDescription
data-pausedWhether playback has stopped.
data-endedWhether playback has ended.