Buttons

Caption Button

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

API Reference

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> 

Props

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

Callbacks

Callback	Type
`onMediaTextTrackChangeRequest`	`function`

Data Attributes

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

Name	Description
`data-supported`	Whether captions/subtitles are available.
`data-active`	Whether closed captions or subtitles are on.

Caption Button

API Reference

Props

`asChild`

`children`

`disabled`

Callbacks

`onMediaTextTrackChangeRequest`

Data Attributes

`data-supported`

`data-active`