Toolbar
A container for interactive controls with arrow-key navigation.
1use herogpui::components::toolbar::Toolbar;Usage
1use herogpui::prelude::{Button, Size, Toolbar, Variant};
2use gpui::prelude::*;
3
4Toolbar::new()
5 .id("toolbar")
6 .child(
7 Button::new("toolbar")
8 .label("Cut")
9 .variant(Variant::Tertiary)
10 .size(Size::Sm),
11 )
12 .child(
13 Button::new("toolbar")
14 .label("Copy")
15 .variant(Variant::Tertiary)
16 .size(Size::Sm),
17 )
18 .child(
19 Button::new("toolbar")
20 .label("Paste")
21 .variant(Variant::Tertiary)
22 .size(Size::Sm),
23 )Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Toolbar
Toolbar is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Toolbar uses.
Styling
| Style | Description |
|---|---|
flex_row/flex_col + items_center + gap(px(8.)) | One row (or column) hugging its controls with the 8px rhythm; a flex row or column stands in for the grid flow. |
Orientation::Horizontal => flex_row + items_center | Default orientation keeps the base row flow and centered cross axis. |
Orientation::Vertical => flex_col + items_start + justify_start | Column flow whose controls hug the start edge; the base rule's centered cross axis stays with the horizontal toolbar. |
p(px(4.)) + util::control_radius + colors.surface.background + overlay_shadow; no border | The attached strip hugs its controls with surface fill, full rounding, 4px padding and the overlay shadow; gives a floating surface no border. |
Separator orientation | Contained separators shrink to half the toolbar; the port's Separator keeps its own thickness and centers itself. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
is_attached( | bool | false | Whether the toolbar has a surface background with full rounding. |
orientation( | Orientation | Orientation:: | The orientation of the toolbar; the axis picks which arrows walk it. |
Parts
| Part | Description |
|---|---|
Toolbar | Root container; set its orientation before separator() to append a centred divider half the bar's cross size. |
States
| Builder | State | Description |
|---|---|---|
child tab stops + child control focus ring | Focused child | Focus lands on the child controls, never the container; each child draws its own ring and the orientation-axis arrows walk the children. |
child control is_disabled | Disabled child | A disabled child is no tab stop: the arrows skip it in both directions and Tab walks past a toolbar with none enabled. |
ToolbarFocusEdge.last_focused | Last focused child | The pinned hook records the child the focus left from and restores it when the focus re-enters from outside; keeps the record in keyed state and skips a recorded child whose element has left the frame, exactly as pinned's focus-capture does. |
ToolbarScopes registry + FocusHandle::contains | Nested toolbar as group | Pinned useToolbar detects a toolbar inside another with parentElement.closest('[role=toolbar]') and the nested one binds no keyboard or focus management of its own — the enclosing toolbar's arrows walk straight across its children and one Tab leaves the whole subtree. Asks the same question of the last rendered frame's dispatch tree: a weak per-window registry of toolbar scopes plus FocusHandle::contains, re-checked at event time against the frame each key dispatched against. |