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.

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>

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).