UI
Request Kit

Manual v0.1 // Component Library

The Music
Toggle

"One <audio> tag, one button. 'activate vibes' has shipped on three separate projects now."

Plays/pauses a looping <audio> on click, same neumorphic pill as ThemeToggle. src is the only required prop, volume/labels are optional, defaulting to the exact copy respri, respriV2, and yolo all landed on independently.

01 / LABEL

default

respri / respriV2 / yolo

Spec▶/⏸ + label, swaps on click, real audio below

<MusicToggle src="/audio/track-1.mp3" />

02 / ICON

icon

respri (playIcons.svg)

Speccircular button, play/pause glyph, lights gold when playing

<MusicToggle src="/audio/track-1.mp3" variant="icon" />

How to use

import { MusicToggle } from "echo-ui";
<MusicToggle
  src="/track-1.mp3"
  :volume="0.4"
  variant="icon"
/>

variant accepts label (default, emoji + text via playLabel/pauseLabel) or icon, same convention as ThemeToggle. volume defaults to 0.4, matching yolo/respriV2. Default slot exposes :is-playing if you want to render something else entirely.

Base rule

pauses itself on unmount, so it never plays into a page you've navigated away from

Source

echo-ui/components/MusicToggle.vue