Toolbar
Toolbar presents related commands as one named, keyboard-navigable control group.
Built from the published package
Know when Toolbar is the right part
Use it when
Use Toolbar for three or more related editor, canvas, or data-view controls that benefit from one Tab entry point.
Choose another path when
Use ordinary Buttons in Stack when every control needs its own Tab stop. Toolbar is not AppBar layout, ButtonGroup, Menubar, Tabs, Pagination, or an application command-state system.
Installation and imports
Import Toolbar from @flowstack-ui/brick or @flowstack-ui/brick/toolbar, and load @flowstack-ui/brick/styles.css once.
The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:
Add the modular stylesheet for every other Brick component the route renders.
Do not combine modular styles with styles.css or tokens.css.
Quick start
Visual recipes and states
Variants change the root surface; sizes coordinate target and typography geometry. Hover, focus-visible, disabled, and pressed states do not change layout.
Examples
API
Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.
| Prop | Values | Default |
|---|---|---|
variant | plain, soft, outline | soft |
size | sm, md, lg | md |
Root inherits Atom orientation, dir, loop, and ariaLabel. The other
five parts preserve their Atom props, including controlled/uncontrolled single
or multiple toggle values. Named exports are Toolbar, ToolbarRoot,
ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, and
ToolbarToggleItem. Public types are ToolbarRootProps, ToolbarButtonProps,
ToolbarLinkProps, ToolbarSeparatorProps, ToolbarToggleGroupProps,
ToolbarToggleItemProps, ToolbarSize, and ToolbarVariant.
Accessibility
Provide ariaLabel on Root and icon-only controls. Tab enters once; orientation-aware arrows, Home/End, looping, disabled omission, link behavior, and aria-pressed are Atom-owned. Avoid descendants that consume the same arrow keys.
Responsive behavior
Toolbar never wraps. It stays content-sized up to its container and scrolls on its main axis when constrained. Consumers own placement, item priority, overflow menus, and orientation changes.
Styling and tokens
Customization
Prefer recipes, then semantic tokens and --brick-toolbar-* variables. Every part accepts className and style through its public Atom/native surface.
Tokens and CSS hooks
Stable classes are .brick-toolbar, .brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__separator, .brick-toolbar__toggle-group, and .brick-toolbar__toggle-item. Root exposes data-variant, data-size, and Atom orientation; toggle items expose Atom pressed state.
Public variables are --brick-toolbar-surface,
--brick-toolbar-border-color, --brick-toolbar-radius,
--brick-toolbar-padding, --brick-toolbar-gap,
--brick-toolbar-item-size, --brick-toolbar-item-padding-inline,
--brick-toolbar-item-radius, --brick-toolbar-item-background,
--brick-toolbar-item-selected-background, and
--brick-toolbar-separator-color.
Advanced reference
Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.