Toolbar

The Toolbar component provides a container for organizing related action buttons, inputs, and controls in a horizontal layout. It’s built on top of Base UI’s Toolbar component and includes visual separators and grouping capabilities.

Installation

CLI
Manual

npx shadcn@latest add @eo-n/toolbar

Install dependencies

First, install the required Base UI package:

npm install @base-ui/react

Copy component code

Copy and paste the following code into your project at components/ui/toolbar.tsx:

"use client";

import * as React from "react";
import { Toolbar as ToolbarPrimitive } from "@base-ui/react";
import { cn } from "@/lib/utils";

function Toolbar({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
  return (
    <ToolbarPrimitive.Root
      data-slot="toolbar"
      className={cn(
        "flex w-fit items-center gap-1 overflow-hidden rounded-lg border p-1",
        className
      )}
      {...props}
    />
  );
}

function ToolbarButton({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Button>) {
  return (
    <ToolbarPrimitive.Button
      data-slot="toolbar-button"
      className={cn(
        "focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap outline-none focus-visible:ring-[3px] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  );
}

function ToolbarLink({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Link>) {
  return (
    <ToolbarPrimitive.Link
      data-slot="toolbar-link"
      className={cn(
        "text-primary focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1 rounded-md px-4 text-xs underline-offset-4 transition-[color] outline-none hover:underline focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
        className
      )}
      {...props}
    />
  );
}

function ToolbarInput({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Input>) {
  return (
    <ToolbarPrimitive.Input
      data-slot="toolbar-input"
      className={cn(
        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
        className
      )}
      {...props}
    />
  );
}

function ToolbarGroup({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Group>) {
  return (
    <ToolbarPrimitive.Group
      data-slot="toolbar-group"
      className={cn("flex items-center gap-1", className)}
      {...props}
    />
  );
}

function ToolbarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ToolbarPrimitive.Separator>) {
  return (
    <ToolbarPrimitive.Separator
      data-slot="toolbar-separator"
      className={cn("bg-border h-8 w-px shrink-0", className)}
      {...props}
    />
  );
}

export {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarInput,
  ToolbarGroup,
  ToolbarSeparator,
};

Update imports

Update the import paths to match your project setup.

Usage

Import the toolbar components and compose them together:

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
  ToolbarLink,
  ToolbarInput,
} from "@/components/ui/toolbar";

<Toolbar>
  <ToolbarButton render={<Button>Save</Button>} />
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarButton render={<Button variant="outline">Undo</Button>} />
    <ToolbarButton render={<Button variant="outline">Redo</Button>} />
  </ToolbarGroup>
</Toolbar>

Components

The root container component that wraps all toolbar items. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Root>

ToolbarButton

A wrapper for rendering buttons within the toolbar with consistent styling. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Button>

render - A React element to render inside the button wrapper

ToolbarLink

A link element styled for use within the toolbar. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Link>

href - The URL the link points to

ToolbarInput

A wrapper for rendering input fields within the toolbar. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Input>

render - A React element to render inside the input wrapper

ToolbarGroup

Groups related toolbar items together visually. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Group>

ToolbarSeparator

A visual separator between toolbar items or groups. Props: Extends React.ComponentProps<typeof ToolbarPrimitive.Separator>

Examples

import { Bold, Italic, Undo2, Redo2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToolbarButton render={<Button variant="default">Save</Button>} />
      <ToolbarSeparator />
      <ToolbarGroup>
        <ToolbarButton
          render={
            <Button variant="outline">
              <Undo2 />
              Undo
            </Button>
          }
        />
        <ToolbarButton
          render={
            <Button variant="outline">
              <Redo2 />
              Redo
            </Button>
          }
        />
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup>
        <ToolbarButton
          render={
            <Toggle variant="outline">
              <Bold />
            </Toggle>
          }
        />
        <ToolbarButton
          render={
            <Toggle variant="outline">
              <Italic />
            </Toggle>
          }
        />
      </ToolbarGroup>
    </Toolbar>
  );
}

Combine toolbar buttons with input fields:

import { Bold, Italic } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Toggle } from "@/components/ui/toggle";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarInput,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarWithInput() {
  return (
    <Toolbar>
      <ToolbarButton render={<Button variant="default">Save</Button>} />
      <ToolbarSeparator />
      <ToolbarGroup>
        <ToolbarButton
          render={
            <Toggle variant="outline">
              <Bold />
            </Toggle>
          }
        />
        <ToolbarButton
          render={
            <Toggle variant="outline">
              <Italic />
            </Toggle>
          }
        />
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarInput render={<Input placeholder="Search and replace" />} />
    </Toolbar>
  );
}

Include links for help or documentation:

import { HelpCircle } from "lucide-react";
import {
  Toolbar,
  ToolbarButton,
  ToolbarLink,
  ToolbarSeparator,
} from "@/components/ui/toolbar";

export default function ToolbarWithLink() {
  return (
    <Toolbar>
      <ToolbarButton render={<Button>Save</Button>} />
      <ToolbarSeparator />
      <ToolbarLink href="#">
        <HelpCircle />
        Learn More
      </ToolbarLink>
    </Toolbar>
  );
}

Accessibility

The toolbar follows WAI-ARIA toolbar pattern
Keyboard navigation is supported with arrow keys
Focus management is handled automatically
Use appropriate aria-label attributes on icon-only buttons

API Reference

For more information about the Base UI Toolbar component, see the Base UI documentation.

Documentation Index

​Installation

​Usage

​Components

​Toolbar

​ToolbarButton

​ToolbarLink

​ToolbarInput

​ToolbarGroup

​ToolbarSeparator

​Examples

​Basic Toolbar

​Toolbar with Input

​Toolbar with Link

​Accessibility

​API Reference