# V toolbar 9

> Basic toolbar

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-toolbar-9).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-toolbar-9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-toolbar-9-light-7e6a9cb0ff1ad50a.png
- Registry item: https://ui.cnippet.dev/r/v-toolbar-9.json
- Categories: toolbar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-toolbar-9.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/toolbar`

## Files

### `registry/default/variants/v-toolbar-9.tsx`

```tsx
"use client";

import {
  MicIcon,
  MicOffIcon,
  MonitorIcon,
  MonitorOffIcon,
  PhoneOffIcon,
  VideoIcon,
  VideoOffIcon,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/registry/default/ui/button";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/registry/default/ui/toolbar";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

export function Pattern() {
  const [micOn, setMicOn] = useState(true);
  const [camOn, setCamOn] = useState(true);
  const [screenOn, setScreenOn] = useState(false);

  return (
    <TooltipProvider>
      <Toolbar>
        <ToolbarGroup>
          <Tooltip>
            <TooltipTrigger
              render={
                <ToolbarButton
                  aria-label={micOn ? "Mute microphone" : "Unmute microphone"}
                  onClick={() => setMicOn((v) => !v)}
                  render={
                    <Button
                      size="icon"
                      variant={micOn ? "ghost" : "destructive"}
                    />
                  }
                >
                  {micOn ? <MicIcon /> : <MicOffIcon />}
                </ToolbarButton>
              }
            />
            <TooltipContent>{micOn ? "Mute" : "Unmute"}</TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger
              render={
                <ToolbarButton
                  aria-label={camOn ? "Turn off camera" : "Turn on camera"}
                  onClick={() => setCamOn((v) => !v)}
                  render={
                    <Button
                      size="icon"
                      variant={camOn ? "ghost" : "destructive"}
                    />
                  }
                >
                  {camOn ? <VideoIcon /> : <VideoOffIcon />}
                </ToolbarButton>
              }
            />
            <TooltipContent>
              {camOn ? "Stop video" : "Start video"}
            </TooltipContent>
          </Tooltip>
        </ToolbarGroup>

        <ToolbarSeparator />

        <ToolbarGroup>
          <Tooltip>
            <TooltipTrigger
              render={
                <ToolbarButton
                  aria-label={screenOn ? "Stop sharing" : "Share screen"}
                  onClick={() => setScreenOn((v) => !v)}
                  render={
                    <Button
                      size="icon"
                      variant={screenOn ? "secondary" : "ghost"}
                    />
                  }
                >
                  {screenOn ? <MonitorOffIcon /> : <MonitorIcon />}
                </ToolbarButton>
              }
            />
            <TooltipContent>
              {screenOn ? "Stop sharing" : "Share screen"}
            </TooltipContent>
          </Tooltip>
        </ToolbarGroup>

        <ToolbarSeparator />

        <ToolbarGroup>
          <ToolbarButton render={<Button size="sm" variant="destructive" />}>
            <PhoneOffIcon className="size-3.5" />
            Leave
          </ToolbarButton>
        </ToolbarGroup>
      </Toolbar>
    </TooltipProvider>
  );
}
```