Toolbar

Buttons 31

About

A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup and ToolbarSeparator. Each part uses the render prop so it can compose with buttons, toggle groups and inputs while keeping a single roving-tabindex focus model. Demos compose it with the Button, Tooltip and ToggleGroup components (shipped alongside).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toolbar to your project and fits it to your theme.

Code

How Toolbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function ToolbarVideoCall() {
  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>
  );
}