Skip to content
FrameworkStyle

CastButton

Accessible Cast toggle button with state reflection and keyboard support

Anatomy

<CastButton />

Behavior

Toggles a Google Cast session. Clicking the button while disconnected opens the Cast device picker; clicking while connected ends the session.

The button derives its presentation from availability:

  • "unsupported" — the HTML custom element receives the native hidden attribute; the React component returns null.
  • "unavailable" — the button remains visible and focusable with aria-disabled="true" and data-disabled, but does not open the picker. This lets a tooltip explain that no Cast device is reachable.
  • "available" — the button is fully interactive unless the disabled prop is set.

Cast sessions come from the Google Cast component. Add it to the player next to your media element; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration.

Styling

Style based on cast and disabled state:

React renders a <button> element. Add a className to style it:

/* During an active session */
.cast-button[data-cast-state="connected"] {
  color: blue;
}

/* Cast is supported, but no device is reachable */
.cast-button[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

Unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.

Accessibility

Renders a <button> with an automatic aria-label:

Cast state Default label
'disconnected' “Start casting”
'connecting' “Connecting”
'connected' “Stop casting”

Override with the label prop. Keyboard activation: Enter / Space.

Examples

Basic Usage

import { CastButton, createPlayer } from '@videojs/react';
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

export default function BasicUsage() {
  return (
    <Player.Provider>
      <Player.Container className="media-container">
        <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />
        <CastButton
          className="media-cast-button"
          render={(props, state) => (
            <button {...props}>{state.connection === 'connected' ? 'Stop casting' : 'Start casting'}</button>
          )}
        />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Props

PropTypeDefaultDetails
disabledbooleanfalse
labelText | string | Text) | function''

State

State is accessible via the render, className, and style props.

PropertyTypeDetails
connection'disconnected' | 'connecting' | 'conn...
availability'available' | 'unavailable' | 'unsupp...
disabledboolean
hiddenboolean
labelText | string

Data attributes

AttributeTypeDetails
data-cast-state'disconnected' | 'connecting' | 'conn...
data-availability'available' | 'unavailable' | 'unsupp...
data-disabled
data-hidden