Looking for the old docs? Go here

Buttons

Caption Button

This component is used to toggle the visibility of the current captions/subtitles text track on press.

HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

A button for toggling the showing state of the captions.

import { CaptionButton, type CaptionButtonProps } from "@vidstack/react";
const track = useMediaState('textTrack'),
  isOn = track && isTrackCaptionKind(track);

<CaptionButton>
  {isOn ? <OnIcon /> : <OffIcon />}
</CaptionButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
CallbackType
onMediaTextTrackChangeRequest
function
/* Example. */
.component[data-foo] {}
NameDescription
data-supported
Whether captions/subtitles are available.
data-active
Whether closed captions or subtitles are on.