Toolbar
A row of grouped actions with dividers, matching a toolbar's compact layout.
html
<UiToolbar />Items
items is a flat array for one group, or nested arrays for several separated by dividers. Entries are toggles by default; type: 'button' makes one a fire-once action instead.
Orientation
orientation lays the toolbar out as a row or a column. Vertical suits a rail pinned to the side of a canvas, where a horizontal bar would eat into the content's width.
Default slot content mixed with `items`
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Prop
Type
Default
Description
ToolbarItem[] | ToolbarItem[][]—
The items to render, either as a flat array or grouped into arrays separated by dividers. Each item is a toggle unless it sets `type: 'button'`.
Slots
Slot
defaultTypes
ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";ts
type ToolbarItem = ToolbarToggleItem | ToolbarButtonItem;ts
interface ToolbarItemBase {
/**
* Used as the item's tooltip text and accessible label.
*/
label: string;
/**
* Name of the icon displayed on the item.
*/
icon: string;
/**
* The color theme of the item.
* @defaultValue 'neutral'
*/
color?: Color;
/**
* Disables the item.
* @defaultValue false
*/
disabled?: boolean;
}ts
interface ToolbarToggleItem {
/**
* Renders the item as a toggle.
* @defaultValue 'toggle'
*/
type?: "toggle";
/**
* Renders the toggle in its pressed/selected state.
* @defaultValue false
*/
active?: boolean;
/**
* Called when the toggle is pressed, with the new pressed state.
*/
onClick?: (pressed: boolean) => void;
}ts
interface ToolbarButtonItem {
/**
* Renders the item as a plain button, for one-shot actions that have no pressed state.
*/
type: "button";
/**
* Renders the button as a link to this route/URL instead of a click action.
*/
to?: string;
/**
* Called when the button is clicked.
*/
onClick?: (e: MouseEvent) => void;
}