shadcn.io is an independent project built on shadcn/ui
Volume starts at 50 percent, not muted. Down and up move by 10, and the level stays between 0 and 100. Reaching 0 mutes, and turning it up unmutes. The second row is minus, the level or the word Muted, and plus. That middle button does not change the volume.
Use steps when the level only needs coarse changes. A precise level is a Slider. In Vue, Ark UI does not change the player's volume.
Installation
Anatomy
Usage
<div class="flex flex-col gap-4">
<ButtonGroup aria-label="Volume">
<Button
:aria-label='isMuted ? "Unmute" : "Mute"'
:aria-pressed="isMuted"
@click="toggleMuted"
size="icon-sm"
variant="outline"
>
<VolumeXIcon v-if="isMuted" aria-hidden="true" />
<Volume2Icon v-else aria-hidden="true" />
</Button>
<Button
aria-label="Volume down"
@click="decreaseVolume"
size="icon-sm"
variant="outline"
>
<VolumeIcon aria-hidden="true" />
</Button>
<Button aria-label="Volume up" @click="increaseVolume" size="icon-sm" variant="outline">
<Volume2Icon aria-hidden="true" />
</Button>
</ButtonGroup>
<ButtonGroup aria-label="Volume">
<Button aria-label="Volume down" @click="decreaseVolume" size="sm" variant="outline">
-
</Button>
<Button size="sm" variant="outline">
{{ isMuted ? "Muted" : `${volume}%` }}
</Button>
<!-- The rest of the file is under 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.
API Reference
Button Group
Sets aria-label="Volume". The rest is on the Button Group page.
Button
Sets aria-label="isMuted ? Unmute : Mute", aria-pressed="isMuted", click="toggleMuted", size="icon-sm", variant="outline" and aria-label="Volume down". The rest is on the Button page.
