Button to toggle the sound. The icon responds to volume changes and acts as part of the typical volume control.



Volume Off / Muted

<media-mute-button media-volume-level="off"></media-mute-button>

Volume Low

<media-mute-button media-volume-level="low"></media-mute-button>

Volume Medium

<media-mute-button media-volume-level="medium"></media-mute-button>

Volume High

<media-mute-button media-volume-level="high"></media-mute-button>

Alternate content

Default High

<media-mute-button><span slot="high">High</span></media-mute-button>

Volume Off / Muted Off

<media-mute-button media-volume-level="off"><span slot="off">Off</span></media-mute-button>

Volume Low Low

<media-mute-button media-volume-level="low"><span slot="low">Low</span></media-mute-button>

Volume Medium Med

<media-mute-button media-volume-level="medium"><span slot="medium">Med</span></media-mute-button>

Volume High High

<media-mute-button media-volume-level="high"><span slot="high">High</span></media-mute-button>


NameDefault TypeDescription
offsvgAn element shown when the media is muted or the media’s volume is 0
lowsvgAn element shown when the media’s volume is “low” (less than 50% / 0.5)
mediumsvgAn element shown when the media’s volume is “medium” (between 50% / 0.5 and 75% / 0.75)
highsvgAn element shown when the media’s volume is “high” (75% / 0.75 or greater)

See our styling docs