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";import { CaptionButton, type CaptionButtonProps } from "@vidstack/react"; const track = useMediaState('textTrack'),
  isOn = track && isTrackCaptionKind(track);

<CaptionButton>
  {isOn ? <OnIcon /> : <OffIcon />}
</CaptionButton> const track = useMediaState('textTrack'),
  isOn = track && isTrackCaptionKind(track);

<CaptionButton>
  {isOn ? <OnIcon /> : <OffIcon />}
</CaptionButton> 

Props

Prop Type Default

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

`asChild`

boolean

false

`children`

ReactNode

null

`disabled`

boolean

undefined

Data Attributes

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