Toolbar
Toolbar groups frequently used commands into a horizontal or vertical bar navigated with the arrow keys.
Made of ToolbarButton (subtle), ToolbarToggleButton, ToolbarDivider and ToolbarGroup. Roving focus: Tab enters the toolbar once, and the arrow keys / Home / End move between items (wrapping around). The small, medium and large sizes match Button.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Toolbar, ToolbarButton, ToolbarToggleButton, ToolbarDivider, ToolbarGroup } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Groups & overflow menu
ToolbarGroup splits the bar into two ends; less used commands go into a Menu.
Size
small and large (medium is the default).
Vertical
orientation="vertical" uses the up / down arrow keys.
Usage
Do
- Always set an aria-label on the Toolbar and on every icon-only button.
- Group related commands with ToolbarDivider / ToolbarGroup.
- Put less used commands in a “More” menu at the end of the bar.
Don't
- Don't put long text inputs or complex content in a toolbar.
- Don't use appearance primary on several buttons in one bar.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"small" | "medium" | "large" | Default: "medium" | Applies to every ToolbarButton inside. |
| orientation"horizontal" | "vertical" | Default: "horizontal" | Bar direction and arrow keys. |
| material"glass" | "glass-clear" | Default: — | Yugen Labs — a floating capsule bar in glass; buttons inside get concentric corners. Use glass-clear over images, with glass-scrim. |
| aria-labelstring | Default: — | Toolbar name for screen readers. |
| ToolbarButtonButtonProps & { vertical?: boolean } | Default: — | A Button with appearance="subtle" by default; vertical puts the icon above the label. |
| ToolbarToggleButtonToggleButtonProps | Default: — | A subtle ToggleButton with checked / onCheckedChange. |
| ToolbarDivider / ToolbarGroupHTMLAttributes | Default: — | 1px stroke-2 divider / item group. |