Toolbar
Freev1.0.0Icon buttons in one frame, with tooltips that show each action's shortcut.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { MoreGlyph, Toolbar, ToolbarKey } from "@/components/ui/notchset/toolbar";
export function RunToolbar({ rerun, more }: { rerun: () => void; more: () => void }) {
return (
<Toolbar legend="RUN_8F3A1 · ACTIONS" aria-label="Run actions">
<ToolbarKey label="Re-run" kbd="R" icon={<span aria-hidden>↻</span>} onClick={rerun} />
<ToolbarKey label="More" icon={<MoreGlyph />} separated onClick={more} />
</Toolbar>
);
}Props
legend–stringThe legend above the toolbar; its node flashes on any press.
aria-label–stringNames the toolbar.
ToolbarKey label–stringThe key's name and tooltip.
ToolbarKey kbd–stringThe shortcut in the tooltip (display; set aria-keyshortcuts for single keys).
ToolbarKey icon–ReactNodeA 16px icon.
ToolbarKey separated–booleanAn ink divider before this key.
Anatomy
- The Notchset instrument parts: legend, node and plate.
- Pure CSS tooltips: no portal, no extra script.
- One file serves both builds.
Toolbardata-slot="toolbar"The joined keys.
ToolbarKeydata-slot="toolbar-key"One icon key.
Tooltipdata-slot="toolbar-tooltip"The ink tag under a key.
Source
components/ui/notchset/toolbar.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/toolbar.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/toolbar.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/toolbar.tsx
- lib/beautiful-ui/notchset/roving.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A row of actions on one object: re-run, open, copy, share
Use something else when
- Text actions: use buttons
Mistakes to avoid
- Label every key: the tooltip shows the same words
Agents find it by
- toolbar, icon buttons, action bar, icon keys, tooltip shortcuts, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/toolbar.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Move between keys
- Home / End
- First or last key
- Enter / Space
- Press
Accessibility
- role=toolbar with roving tabindex; every key has aria-label
- Tooltips are visual; the name is the key's label
Motion
- Press
- Ink fill; the icon drops 1px and scales to .9 in 40ms, springing back over 240ms
- Tooltip
- The leader draws (scaleY) after 300ms on hover; the tag fades and drops 3px after 390ms (90ms on focus)
Responsive
- Keys keep their size; the toolbar scrolls horizontally rather than wrap on narrow screens.
- 44px keys on touch screens.
Performance
- One roving tab stop; keys are plain buttons with CSS transitions.
Changelog
v1.0.0 · 2026-10-02
First release
