Turn off microphone

Microphone settings

Microphone Default - Microphone (Realtek Audio) Speaker Default - Speakers (Realtek Audio) Communications - Speakers (Realtek Audio)

) } `,highlightedCodeHtml:`

import { ChevronDownIcon, MicIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function ButtonGroupWithDropdown() {
  return (
    <div className="flex">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="secondary" className="rounded-r-none">
            <span className="sr-only">Turn off microphone</span>
            <MicIcon className="h-4 w-4" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Turn off microphone</p>
        </TooltipContent>
      </Tooltip>

      <DropdownMenu>
        <Tooltip>
          <TooltipTrigger asChild>
            <div>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="secondary"
                  className="rounded-l-none data-[state=open]:[&>svg]:rotate-180"
                >
                  <ChevronDownIcon className="h-4 w-4" />
                  <span className="sr-only">Microphone settings</span>
                </Button>
              </DropdownMenuTrigger>
            </div>
          </TooltipTrigger>
          <TooltipContent>
            <p>Microphone settings</p>
          </TooltipContent>
        </Tooltip>
        <DropdownMenuContent
          align="center"
          side="top"
          forceMount
          className="min-w-60"
        >
          <DropdownMenuLabel>Microphone</DropdownMenuLabel>

          <DropdownMenuCheckboxItem checked={true}>
            Default - Microphone (Realtek Audio)
          </DropdownMenuCheckboxItem>

          <DropdownMenuSeparator />
          <DropdownMenuLabel>Speaker</DropdownMenuLabel>

          <DropdownMenuCheckboxItem checked={true}>
            Default - Speakers (Realtek Audio)
          </DropdownMenuCheckboxItem>

          <DropdownMenuCheckboxItem checked={false}>
            Communications - Speakers (Realtek Audio)
          </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

`}),` `,(0,a.jsx)(s.h2,{children:"Installation"}),` `,(0,a.jsx)(p,{registryName:"https://ui.booleanfields.com/r/block-button-group-with-dropdown.json"})]})}function h(n={}){let{wrapper:s}=n.components||{};return s?(0,a.jsx)(s,Object.assign({},n,{children:(0,a.jsx)(E,n)})):E(n)}var M=h;function i(n,s){throw new Error("Expected "+(s?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(g);})(); ;return Component;

Button Group with Dropdown

Installation