Buttons

Mute Button

This component is used to mute and unmute media on press.

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

A button for toggling the muted state of the player.

import { MuteButton, type MuteButtonProps } from "@vidstack/react"; const volume = useMediaState('volume'),
  isMuted = useMediaState('muted');

<MuteButton>
  {isMuted || volume == 0 ? (
    <MuteIcon />
  ) : volume < 0.5 ? (
    <VolumeLowIcon />
  ) : (
    <VolumeHighIcon />
  )}
</MuteButton> 

Props

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

Callbacks

Callback	Type
`onMediaMuteRequest`	`function`
`onMediaUnmuteRequest`	`function`

Data Attributes

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

Name	Description
`data-muted`	Whether volume is muted (0).
`data-state`	Current volume setting (low/high/muted).

Mute Button

API Reference

Props

`asChild`

`children`

`disabled`

Callbacks

`onMediaMuteRequest`

`onMediaUnmuteRequest`

Data Attributes

`data-muted`

`data-state`