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.

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

Installation

Usage

Components

ToolbarButton

ToolbarLink

ToolbarInput

ToolbarGroup

ToolbarSeparator

Examples

Accessibility

API Reference

Build docs developers (and LLMs) love

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

​Installation

​Usage

​Components

​Toolbar

​ToolbarButton

​ToolbarLink

​ToolbarInput

​ToolbarGroup

​ToolbarSeparator

​Examples

​Basic Toolbar

​Toolbar with Input

​Toolbar with Link

​Accessibility

​API Reference

Build docs developers (and LLMs) love

Installation

Usage

Components

Toolbar

ToolbarButton

ToolbarLink

ToolbarInput

ToolbarGroup

ToolbarSeparator

Examples

Basic Toolbar

Toolbar with Input

Toolbar with Link

Accessibility

API Reference