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">New</button>
<button class="vt-toolbar-btn vt-px-3 vt-w-auto">Upload</button>
<button class="vt-toolbar-btn vt-px-3 vt-w-auto">Download</button>
</div>With Groups
Button groups separated by dividers.
html
<div class="vt-toolbar">
<button class="vt-toolbar-btn" title="Cut">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<button class="vt-toolbar-btn" title="Copy">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<button class="vt-toolbar-btn" title="Paste">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<div class="vt-h-6 vt-w-px vt-bg-border-default vt-mx-1"></div>
<button class="vt-toolbar-btn" title="Undo">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<button class="vt-toolbar-btn" title="Redo">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
</div>With Search
Toolbar with search input and filter buttons.
html
<div class="vt-toolbar vt-gap-2 vt-p-1.5">
<div class="vt-relative vt-flex-1">
<svg class="vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-w-4 vt-h-4">...</svg>
<input type="text" placeholder="Search..." class="vt-w-full vt-h-9 vt-pl-9 vt-pr-3 vt-rounded-lg vt-text-sm">
</div>
<div class="vt-h-6 vt-w-px vt-bg-border-default"></div>
<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">Active</button>
</div>Editor Toolbar
Rich text editor toolbar with formatting options.
html
<div class="vt-toolbar vt-flex-wrap">
<button class="vt-toolbar-btn vt-font-bold">B</button>
<button class="vt-toolbar-btn vt-italic">I</button>
<button class="vt-toolbar-btn vt-underline">U</button>
<div class="vt-h-6 vt-w-px vt-bg-border-default vt-mx-1"></div>
<button class="vt-toolbar-btn" title="Align left">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<button class="vt-toolbar-btn" title="Align center">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<div class="vt-h-6 vt-w-px vt-bg-border-default vt-mx-1"></div>
<button class="vt-toolbar-btn" title="Link">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<button class="vt-toolbar-btn" title="Image">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
</div>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-surfaces-surface |
Color | Surface background for the toolbar |
vt-h-9 vt-w-9 vt-rounded-lg |
Item | Square icon button dimensions |
vt-h-9 vt-px-3 |
Item | Button with text label dimensions |
vt-hover:bg-surfaces-subtle |
State | Hover background for toolbar buttons |
vt-bg-surfaces-subtle |
State | Active/selected button background |
vt-h-6 vt-w-px vt-bg-border-default |
Divider | Vertical separator between button groups |
vt-text-mains-quaternary |
Color | Inactive button text color |
vt-text-error-primary |
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 |