PlayButton

A button that plays and pauses the media.

import { PlayButton } from 'react-media-kit'

import { PlayButton } from 'react-media-kit'

<PlayButton.Root className="play">
  <span className="icon-play">Play</span>
  <span className="icon-pause">Pause</span>
</PlayButton.Root>

.play .icon-pause,
.play[data-playing] .icon-play {
  display: none;
}
.play[data-playing] .icon-pause {
  display: block;
}

Render it inside Player.Root, next to a Media.Video or Media.Audio.

Swap the icon with data-playing instead of reading the state in React.

Anatomy

<PlayButton.Root />

API reference

It accepts the attributes of the <button> it renders, plus a ref, and sets the media state attributes. Passing aria-label replaces a default label.

PlayButton.Root

renders <button>

Plays or pauses the media. Its aria-label is "Play video", or "Pause video" while playing.

Data attribute	Description
data-playing	The media is playing.

Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.

Media state attributes

Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.

Data attribute	Description
data-media-pending	Loading hasn’t started. This is the initial state.
data-media-loading	The media has started loading.
data-media-metadata-loaded	The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable	The media can play. It stays set if playback later stalls to buffer.
data-media-error	The media element reported an error, such as a network or decoding failure. A blocked `play()` call doesn’t set it; use `onError` for that.
data-fullscreen-unsupported	The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported	Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported	The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.