Looking for the old docs? Go here

Buttons

Mute Button

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

This page is not ready yet, we’re working on getting it done for the 1.0 release. It should be available soon! In the meantime, feel free to use the API reference tables below.

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
NameDescription
data-mutedWhether volume is muted (0).
data-stateCurrent volume setting (low/high/muted).