Buttons

Play Button

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

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

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

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

<PlayButton>
  {isPaused ? <PlayIcon /> : <PauseIcon />}
</PlayButton> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`disabled`	`boolean`	`undefined`

Callbacks

Callback	Type
`onMediaPauseRequest`	`function`
`onMediaPlayRequest`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-paused`	Whether playback has stopped.
`data-ended`	Whether playback has ended.

Play Button

API Reference

Props

`asChild`

`children`

`disabled`

Callbacks

`onMediaPauseRequest`

`onMediaPlayRequest`

Data Attributes

`data-paused`

`data-ended`