Toolbar
Groups actions behind one Tab stop with arrow-key navigation.
Preview
In action
Choose an action
When to use
Use it for
- Editor commands and collections of related actions.
Not for
- A simple joined visual group with independent Tab stops; use ButtonGroup.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Toolbar } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/toolbar.
2. Vendor the source
npx @noorddev/vlak-cli add toolbar
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/toolbar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Toolbar } from "@noorddev/vlak-react";
<Toolbar label="Editing" actions={[{ id: "copy", label: "Copy", icon: "copy", onAction: () => {} }, { id: "undo", label: "Undo", icon: "undo", onAction: () => {} }]} />Props
Toolbar
Named action collection with one Tab stop and roving keyboard focus.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | ||
actionsrequired | ToolbarAction[] | ||
orientation | "horizontal" | "vertical" | "horizontal" |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, arrows, Home, End, Enter, Space | Tab enters once; arrows and Home/End move between enabled actions; Enter/Space activates. |
Accessibility
- Exposes a named toolbar with orientation and pressed state. Disabled actions are skipped during roving navigation.
Markup
<div class="rs-toolbar" role="toolbar" aria-label="Editing"><button class="rs-btn-ghost" tabindex="0">Copy</button><button class="rs-btn-ghost" tabindex="-1">Undo</button></div>
Classes
.rs-toolbar.rs-toolbar-vertical.rs-toolbar-pressed