Toolbar

A horizontal bar of actions and controls for contextual operations.

Default

Action buttons in a horizontal bar.

html 
<div class="uc-flex uc-items-center uc-gap-1 uc-p-1 uc-rounded-2xl uc-border">
  <button class="toolbar-btn">New</button>
  <button class="toolbar-btn">Upload</button>
  <button class="toolbar-btn">Download</button>
</div>

With Groups

Button groups separated by dividers.

html 
<div class="uc-flex uc-items-center uc-gap-1 uc-p-1 uc-rounded-2xl uc-border">
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Cut">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Copy">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Paste">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <div class="uc-h-6 uc-w-px uc-bg-border-default uc-mx-1"></div>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Undo">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Redo">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
</div>

With Search

Toolbar with search input and filter buttons.

html 
<div class="uc-flex uc-items-center uc-gap-2 uc-p-1.5 uc-rounded-2xl uc-border">
  <div class="uc-relative uc-flex-1">
    <svg class="uc-absolute uc-left-3 uc-top-1/2 uc--translate-y-1/2 uc-w-4 uc-h-4">...</svg>
    <input type="text" placeholder="Search..." class="uc-w-full uc-h-9 uc-pl-9 uc-pr-3 uc-rounded-lg uc-text-sm">
  </div>
  <div class="uc-h-6 uc-w-px uc-bg-border-default"></div>
  <button class="uc-h-9 uc-px-3 uc-rounded-lg uc-text-sm uc-bg-neutrals-subtle">All</button>
  <button class="uc-h-9 uc-px-3 uc-rounded-lg uc-text-sm">Active</button>
</div>

Editor Toolbar

Rich text editor toolbar with formatting options.

html 
<div class="uc-flex uc-items-center uc-gap-1 uc-p-1 uc-rounded-2xl uc-border uc-flex-wrap">
  <button class="uc-h-9 uc-w-9 uc-rounded-lg uc-font-bold">B</button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg uc-italic">I</button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg uc-underline">U</button>
  <div class="uc-h-6 uc-w-px uc-bg-border-default uc-mx-1"></div>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Align left">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Align center">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <div class="uc-h-6 uc-w-px uc-bg-border-default uc-mx-1"></div>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Link">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
  <button class="uc-h-9 uc-w-9 uc-rounded-lg" title="Image">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
</div>

API Reference

All CSS classes available for the Toolbar component.

Class Type Description
uc-flex uc-items-center uc-gap-1 uc-p-1 Base Horizontal toolbar container with spacing
uc-rounded-2xl Style Large border radius for toolbar container
uc-border-border-default Style Default border on the toolbar
uc-bg-neutrals-surface Color Surface background for the toolbar
uc-h-9 uc-w-9 uc-rounded-lg Item Square icon button dimensions
uc-h-9 uc-px-3 Item Button with text label dimensions
uc-hover:bg-neutrals-subtle State Hover background for toolbar buttons
uc-bg-neutrals-subtle State Active/selected button background
uc-h-6 uc-w-px uc-bg-border-default Divider Vertical separator between button groups
uc-text-fg-disabled Color Inactive button text color
uc-text-accents-red 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