Channel Toggle
Mute, solo and monitor toggle buttons with their own pressed colours.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/channel-toggle.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/channel-toggle.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/channel-toggle.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/channel-toggle.jsonUsage
<script lang="ts">
import { MuteToggle, SoloToggle } from "#lib/components/ui/channel-toggle/index.js";
let muted = $state(false);
let solo = $state(false);
</script>
<MuteToggle bind:pressed={muted}>M</MuteToggle>
<SoloToggle bind:pressed={solo}>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.
Examples
Variants
default
outline
ghost
Theming
| Token or attribute | Meaning |
|---|---|
--channel-mute, --channel-solo, --channel-monitor | Pressed colours |
aria-pressed, data-state="on" | Pressed |
data-tone | mute, solo, monitor or neutral |
Accessibility
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 reference
| Prop | Type | Default |
|---|---|---|
pressed Bindable. | boolean | false |
onPressedChange | (pressed: boolean) => void | — |
tone Colour when pressed. | "mute" | "solo" | "monitor" | "neutral" | per export |
variant | "default" | "outline" | "ghost" | "default" |
size | "sm" | "default" | "lg" | "icon" | "default" |
disabled Inherited from a channel strip. | boolean | false |