Looking for the old docs? Go here

Buttons

Mute Button

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

HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

A button for toggling the muted state of the player.

import { MuteButton, type MuteButtonProps } from "@vidstack/react";
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>
const volume = useMediaState('volume'),
  isMuted = useMediaState('muted');

<MuteButton>
  {isMuted || volume == 0 ? (
    <MuteIcon />
  ) : volume < 0.5 ? (
    <VolumeLowIcon />
  ) : (
    <VolumeHighIcon />
  )}
</MuteButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
CallbackType
onMediaMuteRequest
function
onMediaUnmuteRequest
function
NameDescription
data-muted
Whether volume is muted (0).
data-state
Current volume setting (low/high/muted).