React Button Group - Volume Controls
Volume control button group with mute toggle and increment/decrement for audio level management
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Audio control requires precision—volume buttons enable granular adjustment. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's Volume2Icon, VolumeIcon, and VolumeXIcon for volume controls with stateful mute toggling and percentage-based level management. Built on Radix UI with Math.max/Math.min for boundary enforcement and conditional icon rendering based on mute state, the pattern delivers volume controls with clear state indication. Perfect for video players like YouTube or Vimeo adjusting playback audio, music applications like Spotify controlling output levels, conferencing tools like Zoom managing microphone input, or any media interface where audio levels should be adjustable—button groups unify volume controls, mute toggle prevents accidental sound, increment buttons enable fine-tuning. The dual pattern approach shown (icon-based vs text-based) demonstrates how volume controls adapt to different space constraints and user needs, with icon variants saving space in compact toolbars while text variants with percentage display providing explicit feedback about current audio levels for precision adjustment scenarios.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-media-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-media-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-media-2.jsonRelated patterns you will also like
Player Controls
Media playback buttons
Quantity Picker
Increment/decrement controls
Slider Component
Range input alternative
Outline Button
Border-style button variant
Toggle Component
On/off state controls
Basic Button Group
Simple grouped buttons