Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

VolumeControl

VolumeControl is a sound’s mute button, its level and the readout (Muted when muted). what names the sound for the buttons’ labels (the video’s own sound). onMute and onChange (0–100) make it operable; the track drags like SliderRow's.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

VolumeControl is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

VolumeControl is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
A sound's mute button, its level and the readout (Muted when muted), such as the video's own sound on the selected cut.
Not for
VolumeControlExample.jsxReact
import { useState } from 'react';
import { VolumeControl } from '@anicanon/sakuga/anicanonkit';

function Vol(props) {
  const [value, setValue] = useState({ v: 80, m: props.muted });
  return (
    <VolumeControl
      value={value.v}
      muted={value.m}
      what="the video’s own sound"
      onMute={() => setValue({ v: value.v, m: !value.m })}
      onChange={(v) => setValue({ v: v, m: false })}
    />
  );
}

export default function VolumeControlExample() {
  return (
    <>
      <Vol muted={false} />
      <Vol muted />
    </>
  );
}

PropsVolumeControlProps

valuerequired
number
muted
boolean
what
string
Names the sound in the buttons' labels.
href
string
onMute
MouseEventHandler
onChange
(value: number) => void
Called with 0–100.
className
string
VolumeControlExample.swiftiOS · coming soon
VolumeControlExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

volume-column-3
its own value
52px
volume-gap
gap-md
8px
volume-slidertrack-muted-opacity
opacity-disabled
0.35

Type

volume-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
volume-b-font-weight
weight-strong
600

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
Tab reaches the mute button, a toggle named "Mute" plus what (default "the sound") and "pressed" when muted, then a slider named "Volume of the sound" and spoken as its percent or "Muted"; with onChange, arrows move it by 1 (10 with Shift), Page Up and Page Down by 10, and Home and End to 0 and 100. Without onChange the slider reads as read-only.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.