MuteButton toggles mute on and off. It also exposes a derived volumeLevel based on the current volume and mute state, enabling multi-level volume icons.
Requires the volume feature to be registered with the player.
Import
import { MuteButton } from '@videojs/react';
Basic Usage
import { MuteButton } from '@videojs/react';
function PlayerControls() {
return <MuteButton />;
}
Custom Render
import { MuteIcon, UnmuteIcon } from './icons';
import { MuteButton } from '@videojs/react';
function PlayerControls() {
return (
<MuteButton
render={(props, state) => (
<button {...props}>
{state.muted ? <MuteIcon /> : <UnmuteIcon />}
</button>
)}
/>
);
}
Props
render
ReactElement | ((props: HTMLProps, state: MuteButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state.
label
string | ((state: MuteButton.State) => string)
Override the automatic aria-label. By default: "Mute" when unmuted, "Unmute" when muted.
className
string | ((state: MuteButton.State) => string)
CSS class name or a function that receives state and returns a class name.
style
CSSProperties | ((state: MuteButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.
State Data Attributes
These attributes are reflected on the rendered <button> element.
| Attribute | Value / Description |
|---|
data-muted | Present when media is muted. |
data-volume-level | "off" | "low" | "medium" | "high" — derived from volume and mute state. |
CSS Styling Example
/* Basic muted/unmuted toggle */
.mute-button[data-muted] .icon-muted { display: inline; }
.mute-button:not([data-muted]) .icon-unmuted { display: inline; }
/* Multi-level volume icons */
.mute-button[data-volume-level="off"] .icon-off { display: inline; }
.mute-button[data-volume-level="low"] .icon-low { display: inline; }
.mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
.mute-button[data-volume-level="high"] .icon-high { display: inline; }
Accessibility
Renders a <button> element. The aria-label updates automatically: "Mute" or "Unmute". Keyboard activation: Enter / Space.