Looking for the old docs? Go here

Buttons

Play Button

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

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
CallbackType
onMediaPauseRequest
function
onMediaPlayRequest
function
NameDescription
data-paused
Whether playback has stopped.
data-ended
Whether playback has ended.