Workspace
Toolbar
A horizontal action strip with an overflow menu
Usage
import { Toolbar, type ToolbarAction } from "@gpuixui/shell";
const actions: ReadonlyArray<ToolbarAction> = [
{ id: "open", label: "Open", icon: "file", group: "file" },
{ id: "save", label: "Save", icon: "download", group: "file" },
{ id: "copy", label: "Copy", icon: "copy", group: "edit" },
{ id: "link", label: "Link", icon: "link", group: "edit" },
];
<Toolbar label="Document" max={5} actions={actions} onAction={(id) => run(id)} />;API
| Part | Renders | Props |
|---|---|---|
Toolbar | div with role="toolbar" | label?, actions (required), max?, onAction?, modes?, mode?, onModeChange?, modesLabel?, className? |
ToolbarAction | one Button in the leading group | id, label, icon?, group?, disabled? |
ToolbarMode | one option in the trailing ToggleGroup | id, label, disabled? |
The strip is a leading group of actions, a flexible spacer, then the trailing group — the mode group and the overflow trigger.
Keyboard
- Arrow LeftArrow Right
- moves focus between the toolbar's slots
- EnterSpace
- toggles the overflow menu, and runs the focused overflow action
- Escape
- closes the overflow menu
read from toolbar.tsx, Button.tsx
Edit this page on GitHubpackages/shell/docs/toolbar.mdx