Media Toggle

A round call-control key for a mic, camera, or screen share. Enabled is a neutral embossed key; muted goes destructive-tinted with a slashed icon — muting is a state you should notice, not an absence.

tsx

import { MediaToggle } from "@/registry/seam/ui/media-toggle"

export default function MediaToggleDemo() {
  return (
    <div className="flex items-center gap-2">
      <MediaToggle kind="mic" defaultPressed />
      <MediaToggle kind="camera" defaultPressed={false} />
      <MediaToggle kind="screen-share" defaultPressed />
    </div>
  )
}

bunx --bun @seamui/cli@latest add media-toggle

API

Prop	Type	Default	Description
kind	"mic" \| "camera" \| "screen-share"	"mic"	Picks the icon pair and the default aria-label.
iconOn	LucideIcon	—	Override the enabled icon for a custom control.
iconOff	LucideIcon	—	Override the muted icon.
pressed	boolean	—	Controlled state — pressed means the track is enabled; unpressed is muted. Uncontrolled it starts enabled.
haptic	boolean \| "tap" \| "tick" \| "success" \| "error"	true	Via Toggle — haptic on press when a HapticsProvider is mounted; false opts out.

Plus all Toggle props (onPressedChange, defaultPressed, variant, size, …).

Notes

The prop shape maps onto the AI/LiveKit TrackToggle (useTrackToggle) shape with no runtime dependency.
Muted is destructive-tinted and slash-iconed — color is never the only signal.
Toggling crossfades the tint and the on/off icon on opacity only, so it reads identically under reduced motion.
A native toggle button with aria-pressed; the aria-label defaults per kind (“Microphone”, “Camera”, “Share screen”).

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.