Channel Toggle

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/channel-toggle

UsageCopy Anchor Link

import {
  MonitorToggle,
  MuteToggle,
  SoloToggle,
} from "@/components/ui/channel-toggle";

<MuteToggle pressed={muted} onPressedChange={setMuted}>M</MuteToggle>
<SoloToggle pressed={solo} onPressedChange={setSolo}>S</SoloToggle>

The presets set the tone and a default aria-label. Children are a letter, a word or an icon; nothing is rendered by default. Use ChannelToggle with a tone for anything else.

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

Toggles are buttons with aria-pressed. The presets are labelled "Mute", "Solo" and "Monitor"; override aria-label to name the channel, such as "Mute microphone".

API referenceCopy Anchor Link