Getting Started
Foundations
Components
Toolbar
A container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus.
#Installation
npx @dinachi/cli@latest add toolbar#Usage
tsx
import { Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarGroup, ToolbarInput } from '@/components/ui/toolbar'#Examples
Default Toolbar
A toolbar with formatting buttons, separators, and a link
Toolbar with Labels
Toolbar buttons with text labels
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the toolbar |
| dir | 'ltr' | 'rtl' | 'ltr' | The reading direction of the toolbar |
| loop | boolean | true | Whether keyboard navigation should loop from last to first and vice versa |