FrameworkStyle

PlayButton

A button component for playing and pausing media playback

Features

  • Automatically switches icons based on playback state
  • Uses data attributes for state-based styling
  • Accessible keyboard navigation
  • Works with any media element

Example 

import { PlayButton } from '@videojs/react';
import { PauseIcon, PlayIcon } from '@videojs/react/icons';
import styles from './PlayButton.module.css';

/**
 * Basic PlayButton example demonstrating:
 * - Icon switching based on paused state
 * - CSS Modules for scoped styling
 * - Data attribute selectors for state-based styling
 *
 * Note: This component must be used within a MediaProvider context.
 * See the usage example in the documentation.
 */
export function BasicPlayButton() {
  return (
    <PlayButton className={styles.button}>
      <PlayIcon className={styles.playIcon} />
      <PauseIcon className={styles.pauseIcon} />
    </PlayButton>
  );
}

Data Attributes

The PlayButton automatically sets data attributes based on media state:

  • data-paused - Present when media is paused, absent when playing

Use these attributes for state-based styling in your CSS.

Props

All standard button props are supported, plus:

Prop Type Description
children ReactNode Button content (typically icons)
className string CSS class name

Accessibility

  • Automatically includes proper ARIA labels
  • Keyboard accessible (Space/Enter)
  • Announces state changes to screen readers
VideoJS