Toolbar
navigationA container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.
Preview
Installation
npm install @launchapp/design-systemImport
import { ToolbarRoot, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem} from "@launchapp/design-system";Examples
Basic Toolbar
<ToolbarRoot className="flex w-full min-w-max rounded-md border bg-background p-0.5"> <ToolbarToggleGroup type="multiple"> <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem> <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem> <ToolbarToggleItem value="underline">Underline</ToolbarToggleItem> </ToolbarToggleGroup> <ToolbarSeparator /> <ToolbarButton>Clear</ToolbarButton></ToolbarRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the toolbar. |
loop | boolean | true | Whether keyboard navigation loops. |