Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Volume Controls Button Group for Ark UI

Volume controls that start at 50 percent: mute, down, and up, plus a row that shows the level or Muted.

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 React, Ark UI does not change the player's volume.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Volume">
    <Button
      aria-label={isMuted ? "Unmute" : "Mute"}
      aria-pressed={isMuted}
      onClick={toggleMuted}
      size="icon-sm"
      variant="outline"
    >
      {isMuted ? (
        <VolumeXIcon aria-hidden="true" />
      ) : (
        <Volume2Icon aria-hidden="true" />
      )}
    </Button>
    <Button
      aria-label="Volume down"
      onClick={decreaseVolume}
      size="icon-sm"
      variant="outline"
    >
      <VolumeIcon aria-hidden="true" />
    </Button>
    <Button
      aria-label="Volume up"
      onClick={increaseVolume}
      size="icon-sm"
      variant="outline"
    >
      <Volume2Icon aria-hidden="true" />
    </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.

What happens at 0?

Volume down to 0 turns mute on. Volume up always turns it off.

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}, onClick={toggleMuted}, size="icon-sm", variant="outline" and aria-label="Volume down". The rest is on the Button page.

All 39 button group examples