Components / Toolbar
Toolbar
Grouped-action container implementing the ARIA toolbar roving-tabindex pattern: one tab stop, arrow keys move between actions. Skips disabled items and separators.
actionsv0.8.0
Playground
Examples
Formatting toolbar
<cg-toolbar label="Text formatting"><cg-button variant="ghost">Bold</cg-button><cg-button variant="ghost">Italic</cg-button><cg-separator orientation="vertical"></cg-separator><cg-button variant="ghost">Link</cg-button></cg-toolbar>Vertical
<cg-toolbar orientation="vertical" label="Tools"><cg-button variant="ghost">Move</cg-button><cg-button variant="ghost">Draw</cg-button><cg-button variant="ghost">Erase</cg-button></cg-toolbar>With disabled action
<cg-toolbar label="Editor"><cg-button variant="ghost">Undo</cg-button><cg-button variant="ghost" disabled>Redo</cg-button><cg-button variant="ghost">Save</cg-button></cg-toolbar>Import
import { CgToolbar } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-toolbar';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Arrow-key axis and layout direction |
label | string | "" | aria-label for the toolbar landmark |
size | "sm" | "md" | "lg" | "md" | Gap and padding scale |
wrap | boolean | false | Allow items to wrap to multiple lines |