Toolbar

A horizontal bar of actions and controls for contextual operations.

Default

Action buttons in a horizontal bar.

html

<div class="vt-toolbar">
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-4 vt-h-4 vt-mr-2">
      <path d="M5 12h14"></path><path d="M12 5v14"></path>
    </svg>
    New
  </button>
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-upload vt-w-4 vt-h-4 vt-mr-2">
      <path d="M12 3v12"></path><path d="m17 8-5-5-5 5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    </svg>
    Upload
  </button>
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-download vt-w-4 vt-h-4 vt-mr-2">
      <path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path>
    </svg>
    Download
  </button>
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-share-2 vt-w-4 vt-h-4 vt-mr-2">
      <circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
    </svg>
    Share
  </button>
</div>

With Groups

Button groups separated by dividers.

html

<div class="vt-toolbar">
  <!-- Group 1: Clipboard -->
  <button class="vt-toolbar-btn" title="Cut">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-scissors vt-w-4 vt-h-4">
      <circle cx="6" cy="6" r="3"></circle><path d="M8.12 8.12 12 12"></path><path d="M20 4 8.12 15.88"></path><circle cx="6" cy="18" r="3"></circle><path d="M14.8 14.8 20 20"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Copy">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-copy vt-w-4 vt-h-4">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Paste">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-clipboard-paste vt-w-4 vt-h-4">
      <path d="M11 14h10"></path><path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path><path d="m17 18 4-4-4-4"></path><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"></path><rect x="8" y="2" width="8" height="4" rx="1"></rect>
    </svg>
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6 vt-mx-1"></div>

  <!-- Group 2: History -->
  <button class="vt-toolbar-btn" title="Undo">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-undo-2 vt-w-4 vt-h-4">
      <path d="M9 14 4 9l5-5"></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Redo">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-redo-2 vt-w-4 vt-h-4">
      <path d="m15 14 5-5-5-5"></path><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"></path>
    </svg>
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6 vt-mx-1"></div>

  <!-- Group 3: Actions -->
  <button class="vt-toolbar-btn" title="Delete">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trash-2 vt-w-4 vt-h-4 vt-text-error-fill">
      <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    </svg>
  </button>
</div>

With Search

Toolbar with search input and filter buttons.

html

<div class="vt-toolbar vt-gap-2 vt-p-1.5">
  <!-- Search input -->
  <div class="vt-relative vt-flex-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-w-4 vt-h-4 vt-text-foreground-muted">
      <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
    </svg>
    <input type="text" placeholder="Search..." class="vt-w-full vt-h-10 vt-pl-10 vt-pr-3 vt-rounded-lg vt-text-sm vt-bg-transparent vt-border-none vt-outline-none vt-placeholder:text-foreground-muted vt-focus:ring-0" aria-label="Search...">
  </div>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6"></div>

  <!-- Filter buttons -->
  <button class="vt-toolbar-btn vt-active vt-px-3 vt-w-auto">
    All
  </button>
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto vt-text-foreground-muted">
    Active
  </button>
  <button class="vt-toolbar-btn vt-px-3 vt-w-auto vt-text-foreground-muted">
    Archived
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6"></div>

  <!-- View toggle -->
  <button class="vt-toolbar-btn vt-active" title="Grid view">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-layout-grid vt-w-4 vt-h-4">
      <rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect>
    </svg>
  </button>
  <button class="vt-toolbar-btn vt-text-foreground-muted" title="List view">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-list vt-w-4 vt-h-4">
      <path d="M3 5h.01"></path><path d="M3 12h.01"></path><path d="M3 19h.01"></path><path d="M8 5h13"></path><path d="M8 12h13"></path><path d="M8 19h13"></path>
    </svg>
  </button>
</div>

Rich text editor toolbar with formatting options.

html

<div class="vt-toolbar vt-flex-wrap">
  <!-- Text formatting -->
  <button class="vt-toolbar-btn vt-active vt-font-bold" title="Bold">
    B
  </button>
  <button class="vt-toolbar-btn vt-italic" title="Italic">
    I
  </button>
  <button class="vt-toolbar-btn vt-underline" title="Underline">
    U
  </button>
  <button class="vt-toolbar-btn vt-line-through" title="Strikethrough">
    S
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6 vt-mx-1"></div>

  <!-- Alignment -->
  <button class="vt-toolbar-btn vt-active" title="Align left">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-start vt-w-4 vt-h-4">
      <path d="M21 5H3"></path><path d="M15 12H3"></path><path d="M17 19H3"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Align center">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-center vt-w-4 vt-h-4">
      <path d="M21 5H3"></path><path d="M17 12H7"></path><path d="M19 19H5"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Align right">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-start vt-w-4 vt-h-4">
      <path d="M21 5H3"></path><path d="M15 12H3"></path><path d="M17 19H3"></path>
    </svg>
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6 vt-mx-1"></div>

  <!-- Lists -->
  <button class="vt-toolbar-btn" title="Unordered list">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-list vt-w-4 vt-h-4">
      <path d="M3 5h.01"></path><path d="M3 12h.01"></path><path d="M3 19h.01"></path><path d="M8 5h13"></path><path d="M8 12h13"></path><path d="M8 19h13"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Ordered list">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-list-ordered vt-w-4 vt-h-4">
      <path d="M11 5h10"></path><path d="M11 12h10"></path><path d="M11 19h10"></path><path d="M4 4h1v5"></path><path d="M4 9h2"></path><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"></path>
    </svg>
  </button>

  <!-- Divider -->
  <div class="vt-separator vt-separator-v vt-h-6 vt-mx-1"></div>

  <!-- Insert -->
  <button class="vt-toolbar-btn" title="Link">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-link vt-w-4 vt-h-4">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Image">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-4 vt-h-4">
      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
    </svg>
  </button>
  <button class="vt-toolbar-btn" title="Code">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-code vt-w-4 vt-h-4">
      <path d="m16 18 6-6-6-6"></path><path d="m8 6-6 6 6 6"></path>
    </svg>
  </button>
</div>

Guidelines

Horizontal row of icon actions (each with a tooltip). Vertical navigation → sidebar.

Label every icon button and group related tools with dividers.

Don't

Don't ship icon-only buttons with no accessible label.

API Reference

All CSS classes available for the Toolbar component.

Class	Type	Description
`vt-flex vt-items-center vt-gap-1 vt-p-1`	Base	Horizontal toolbar container with spacing
`vt-rounded-2xl`	Style	Large border radius for toolbar container
`vt-border-border-default`	Style	Default border on the toolbar
`vt-bg-surface-card`	Color	Surface background for the toolbar
`vt-h-10 vt-w-10 vt-rounded-lg`	Item	Square icon button dimensions
`vt-h-10 vt-px-3`	Item	Button with text label dimensions
`vt-hover:bg-surface-subtle`	State	Hover background for toolbar buttons
`vt-bg-surface-subtle`	State	Active/selected button background
`vt-h-6 vt-w-px vt-bg-border-default`	Divider	Vertical separator between button groups
`vt-text-foreground-muted`	Color	Inactive button text color
`vt-text-error-fill`	Color	Destructive action icon color

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="toolbar" with aria-label describing the toolbar purpose
Keyboard	Arrow keys navigate between tools, Tab moves out of toolbar
Groups	Related buttons within toolbar use role="group" with aria-label
Labels	Icon-only buttons need aria-label describing the action

Built with:

Button Icons Separator

Toolbar

Default

With Groups

With Search

Editor Toolbar

Guidelines

API Reference

Accessibility