Toolbar, Asgard Docs

Navigation & chrome

A bar of grouped actions and toggles.

A horizontal toolbar for grouping action buttons, toggles, and icon controls.

Key features:

Themed bar positioned at top or bottom of a container
ToolbarIconButton for consistent styling with built-in tooltip
Active/toggle state and disabled support
Intersperse custom elements or dividers for grouping

Loading preview…

When to use it

Editor and canvas action bars
Formatting controls (bold, align)
Table / list bulk actions
App headers and footers

Properties

Prop	Type	Default	Description
`children`	`ReactNode`	—	Toolbar content, typically ToolbarIconButton elements or separator components.
`position`	`'top' \| 'bottom'`	`'top'`	Where the toolbar is rendered relative to its parent container.
`icon`	`ReactNode`	—	(ToolbarIconButton) The icon element to display inside the button.
`onClick`	`() => void`	—	(ToolbarIconButton) Click handler invoked when the button is pressed.
`tooltip`	`string`	—	(ToolbarIconButton) Optional tooltip text shown on hover.
`active`	`boolean`	`false`	(ToolbarIconButton) When true, renders the button in an active/toggled-on state.
`disabled`	`boolean`	`false`	(ToolbarIconButton) When true, the button is non-interactive and visually dimmed.

Notes

Use ToolbarIconButton (not IconButton) for toolbar items to avoid the naming conflict between the standalone IconButton and the toolbar-specific variant.
Toolbar renders a horizontal bar with a themed background that adapts to the current theme automatically.
You can intersperse custom elements or dividers between ToolbarIconButton elements for logical grouping.

Presets