Components / Controls
Toolbar
One tab stop for a row of controls: Tab enters and leaves once, the arrows, Home and End move between the buttons.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarButton } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
Toolbar aria-label | string | Required: the toolbar is announced by its name. ToolbarGroup needs one too. |
Toolbar variant / sticky / contain | plain | bar / boolean / boolean | bar is the page background between two hairlines, aligned to the page gutter, and measures its own width; sticky keeps it under the top of its scroll container. |
Toolbar orientation / loopFocus | horizontal | vertical / boolean | Arrow keys follow the orientation; focus wraps unless loopFocus is false. |
ToolbarButton label | string | The name, as a text node inside the button. Hidden until reveal shows it. |
ToolbarButton reveal | early | middle | late | Shows the label from a toolbar width of 40rem, 52rem or 76rem. |
ToolbarButton tier | high | low | overflow | low is hidden below 34rem and folds into a menu; overflow is that menu's trigger and only shows below 34rem. Hidden items leave the arrow-key order. |
ToolbarButton tooltip / shortcut | boolean | ReactNode / string | string[] | { keys, sequence? } | As IconButton, including the sequence form. |
Behavior
Buttons stay in the arrow order when disabled (aria-disabled, no click) so neighbours never shift under a person who is arrowing. A native text field or select inside a toolbar adds a tab stop of its own; put it next to the toolbar. Before hydration the buttons are click targets only.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.