Toolbar

All Components

Toolbar

A programmable action bar with regions, overflow, split buttons, gallery controls, drag-to-dock, and KeyTips.

Document Editor Toolbar (Docked Top)

Docked top, horizontal, 3 regions with standard tools.

Diagram Tool Palette (Docked Left)

Vertical, icon-only tools for diagramming.

Split Button Demo

Paste split button with dropdown variants.

Colour Gallery

Gallery control with 8 colour swatches in a 4-column grid.

Overflow Demo

Narrow toolbar forcing overflow. Dual buttons for L/R regions.

Button Styles

Icon-only, label-only, and icon+label buttons.

Drag-to-Dock

Floating toolbar that can be dragged to edges to dock.

Toggle Orientation

Switch between horizontal and vertical.

Save / Restore Layout

Toolbar Title

Non-interactive title with icon and custom colours at the left edge.

Left/Right Regions

Regions aligned to left and right sides with flexible space between.

Right Content

Custom HTML in a right-aligned slot (metadata, session info).

Input, Dropdown & Label

Embedded input, dropdown, and static label items in toolbar.

Checkbox, Switch, Number & Color

Checkbox, toggle switch, number spinner, and color picker items.

Cleanup

Output: