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";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> 

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-muted`	Whether volume is muted (0).
`data-state`	Current volume setting (low/high/muted).