HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ToolbarView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA group of controls that share one tab stop.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/toolbar'import'@fusion.dev/helix-headless/toolbar'Preview
API ReferenceRoothelix-toolbarA group of controls that share one tab stop.
PropTypeDescriptionlabelstringDefault"Toolbar"The toolbar's name, read by screen readers.orientation"horizontal"|"vertical"The direction the arrow keys move focus in.size"sm"|"md"|"lg"The size of every control in the toolbar: their height, icons, boxes and
tags. Unset is the small size, as a toolbar is dense by nature.stopAtEndsbooleanDefaultfalseWhether the arrow keys stop at the first and the last control. Unset, they
wrap around from one end to the other.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The toolbar's controls.
PartDescriptiontoolbarThe toolbar container.
CSS PropertyDescription--toolbar-alignHow the controls line up across the toolbar's axis. Centered unless set; stretch makes a vertical toolbar's controls as wide as it is.--toolbar-background-colorThe fill behind the controls. Transparent unless set.--toolbar-border-colorThe color of the toolbar's edge, once it has a width.--toolbar-border-widthThe width of the toolbar's edge. None unless set.--toolbar-gapThe space between controls.--toolbar-paddingThe space between the toolbar's edge and its controls.--toolbar-radiusThe corner radius of the toolbar's fill.--toolbar-separator-gapExtra space either side of a Divider between controls, along the toolbar's axis. None unless set.
Custom stateDescriptionhorizontalThe controls run along a row, which is the default.nestedThe toolbar is a group inside another toolbar, which owns the keys and the tab stop.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalThe controls run down a column, under orientation="vertical".
Roothelix-headless-toolbarA group of controls that share one tab stop.
PropTypeDescriptionlabelstringDefault"Toolbar"The toolbar's name, read by screen readers.orientation"horizontal"|"vertical"The direction the arrow keys move focus in.stopAtEndsbooleanDefaultfalseWhether the arrow keys stop at the first and the last control. Unset, they
wrap around from one end to the other.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The toolbar's controls.
PartDescriptiontoolbarThe toolbar container.
Custom stateDescriptionhorizontalThe controls run along a row, which is the default.nestedThe toolbar is a group inside another toolbar, which owns the keys and the tab stop.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalThe controls run down a column, under orientation="vertical".
Examples
NameDescriptionPreviewControls in a row that share one tab stop, with the arrow keys moving between them.PreviewControls in a row that share one tab stop, with the arrow keys moving between them.VerticalA column of controls, where the Up and Down arrow keys move between them.