1. Buttons
  2. Mute Button

Buttons

Mute Button

This component is used to mute and unmute media.

Usage

The <media-mute-button> component will toggle the muted state of media as it's pressed by dispatching a media-mute-request, and media-unmute-request event to the player.

Key Shortcuts

Keyboard shortcuts can be specified either through the global key shortcuts config, or on the component like so:

👉 See the aria-keyshortcuts docs for more information.

Custom Icons

Here's an example containing custom muted and volume icons:

Tooltips

Tooltips can be provided like so:

Styling

You can override the default styles with CSS like so:

css 
        media-mute-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when media is muted. */
media-mute-button[data-volume='muted'] {
}

/* Apply styles when media is _not_ muted. */
media-mute-button:not([data-volume='muted']) {
}

/* Apply styles when media volume is low (0% < x < 50%). */
media-mute-button[data-volume='low'] {
}

/* Apply styles when media volume is high (≥50%). */
media-mute-button[data-volume='high'] {
}

/* Style default icons. */
media-mute-button svg[slot='volume-muted'] {
}
media-mute-button svg[slot='volume-low'] {
}
media-mute-button svg[slot='volume-high'] {
}

Focus

css 
        media-mute-button {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-mute-button[data-focus] {
}

Tailwind

The following is a headless example using Tailwind:

Tooltips

The following extends the example above with tooltips:
Previous <- Play Button
Next Fullscreen Button ->