---
title: MuteButton
frameworkTitle:
  html: mute-button
description: A button component for toggling audio mute state
---

import { MuteButtonDemo } from '@/examples/react/MuteButton/MuteButtonDemo';
import componentModuleStr from '@/examples/react/MuteButton/BasicMuteButton.tsx?raw';
import cssModuleStr from '@/examples/react/MuteButton/MuteButton.module.css?raw';
import htmlStr from '@/examples/html/mute-button/snippet.html?raw';
import htmlCssStr from '@/examples/html/mute-button/mute-button.css?raw';
import htmlJsStr from '@/examples/html/mute-button/mute-button.js?raw';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsPanel } from '@/components/Tabs';

## Features

- Multi-state icon display (high, low, off)
- Automatically reflects volume level changes
- Toggles mute/unmute on click
- Accessible keyboard navigation

## Example

<FrameworkCase frameworks={["react"]}>
  <TabsRoot
    aria-label="React implementation"
    titles={{ component: 'Component', css: 'CSS Module' }}
    client:load
  >
    <TabsPanel value="component" client:load>
      <ServerCode code={componentModuleStr} lang="tsx" />
    </TabsPanel>

    <TabsPanel value="css" client:load>
      <ServerCode code={cssModuleStr} lang="css" />
    </TabsPanel>
    
    <MuteButtonDemo client:load />
  </TabsRoot>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <TabsRoot
    aria-label="HTML implementation"
    titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
    client:load
  >
    <TabsPanel value="html" client:load>
      <ServerCode code={htmlStr} lang="html" />
    </TabsPanel>

    <TabsPanel value="css" client:load>
      <ServerCode code={htmlCssStr} lang="css" />
    </TabsPanel>

    <TabsPanel value="javascript" client:load>
      <ServerCode code={htmlJsStr} lang="js" />
    </TabsPanel>

    <MuteButtonDemo client:load /> 
  </TabsRoot>
</FrameworkCase>



## Data Attributes

The MuteButton automatically sets data attributes based on volume level:

- `data-volume-level="high"` - Volume > 50%
- `data-volume-level="medium"` - Volume 25-50%
- `data-volume-level="low"` - Volume 1-24%
- `data-volume-level="off"` - Volume 0% (muted)

Use these attributes for state-based styling in your CSS.

<FrameworkCase frameworks={["react"]}>

## Props

All standard button props are supported, plus:

| Prop | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Button content (typically icons) |
| `className` | `string` | CSS class name |

</FrameworkCase>

## Accessibility

- Automatically includes proper ARIA labels
- Keyboard accessible (Space/Enter)
- Announces volume state changes to screen readers