v10/site/src/content/docs/reference/mute-button.mdx

---
title: MuteButton
frameworkTitle:
  html: media-mute-button
description: Accessible mute/unmute button with keyboard support and volume state reflection
---

import ComponentReference from "@/components/docs/api-reference/ComponentReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";

{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/mute-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/mute-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/mute-button/react/css/BasicUsage.css?raw";

{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/mute-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";

{/* React demos — Volume Levels */}
import VolumeLevelsDemoReact from "@/components/docs/demos/mute-button/react/css/VolumeLevels";
import volumeLevelsReactTsx from "@/components/docs/demos/mute-button/react/css/VolumeLevels.tsx?raw";
import volumeLevelsReactCss from "@/components/docs/demos/mute-button/react/css/VolumeLevels.css?raw";

{/* HTML demos — Volume Levels */}
import VolumeLevelsDemoHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.astro";
import volumeLevelsHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.html?raw";
import volumeLevelsHtmlCss from "@/components/docs/demos/mute-button/html/css/VolumeLevels.css?raw";
import volumeLevelsHtmlTs from "@/components/docs/demos/mute-button/html/css/VolumeLevels.ts?raw";

## Anatomy

<FrameworkCase frameworks={["react"]}>
```tsx
<MuteButton />
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html
<media-mute-button></media-mute-button>
```
</FrameworkCase>

## Behavior

Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.

## Styling

Style the button based on muted state:

<FrameworkCase frameworks={["html"]}>
```css
media-mute-button[data-muted] .icon-muted { display: inline; }
media-mute-button:not([data-muted]) .icon-unmuted { display: inline; }
```
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
React renders a `<button>` element. Add a `className` to style it:

```css
.mute-button[data-muted] .icon-muted { display: inline; }
.mute-button:not([data-muted]) .icon-unmuted { display: inline; }
```
</FrameworkCase>

Use `data-volume-level` for multi-level icon switching:

<FrameworkCase frameworks={["html"]}>
```css
media-mute-button[data-volume-level="off"] .icon-off { display: inline; }
media-mute-button[data-volume-level="low"] .icon-low { display: inline; }
media-mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
media-mute-button[data-volume-level="high"] .icon-high { display: inline; }
```
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```css
.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; }
```
</FrameworkCase>

## Accessibility

Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute" when unmuted. Override with the `label` prop. Keyboard activation: <kbd>Enter</kbd> / <kbd>Space</kbd>.

## Examples

### Basic Usage

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}>
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageHtml, lang: "html" },
      { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

### Volume Levels

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: volumeLevelsReactTsx, lang: "tsx" },
      { title: "App.css", code: volumeLevelsReactCss, lang: "css" },
    ]}>
      <VolumeLevelsDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: volumeLevelsHtml, lang: "html" },
      { title: "index.css", code: volumeLevelsHtmlCss, lang: "css" },
      { title: "index.ts", code: volumeLevelsHtmlTs, lang: "ts" },
    ]}>
      <VolumeLevelsDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

<ComponentReference component="MuteButton" />