shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Media
Volume Controls Button Group for React
Volume controls with a mute toggle and volume down and up buttons, and a row showing the level as a percentage.
Step-based volume for a player. The first row is a mute toggle and two icon buttons that move the level by 10; the second shows the level, or Muted, between minus and plus. Reaching 0 mutes, and turning the volume up unmutes.
Preview
Installation
FAQ
What is tracked?
A volume from 0 to 100, starting at 50, and a muted flag. Down subtracts 10 and stops at 0; up adds 10 and stops at 100.
How does mute change the icon?
The mute button shows VolumeXIcon when muted and Volume2Icon otherwise. Its aria-label reads Unmute or Mute, and aria-pressed reports the muted state.
How are the icon and symbol buttons named?
Volume down and Volume up are aria-labels on both rows, so the - and + buttons aren't read as bare symbols.
Does the middle button do anything?
No. It shows the level, such as 50%, or Muted, and has no handler. Use ButtonGroupText instead if you don't want it to take focus.
Should this be a slider?
For fine control, yes: a Slider sets any level in one drag. Buttons suit quick steps and small spaces.
Related
- Player Controls Button GroupMedia player controls with previous, play
- Zoom Controls Button GroupZoom controls that step from 25% to 400%
- Quantity Picker Button GroupTwo quantity pickers with minus and plus
- Simple SliderA single-thumb slider with no label or
- Default ToggleAn icon-only toggle that turns bold on
- Playback Speed Button GroupA playback speed picker with rates from