## Overview [#overview]
`Toolbar` provides consistent shell spacing for dense UI rows without owning the
surfaces of the controls inside it. Compose it with `Button`, `Input`,
`SearchExpand`, `ToggleGroup`, `Menu`, `Breadcrumb`, and other components.
`size` scales toolbar-owned gaps, separators, title text, count text, and the
title trigger. Pass the same size to composed controls when the whole row should
follow one density.
`Toolbar.TitleTrigger` is an unstyled `Button` for title-adjacent menu labels.
It stays surface-free and only handles text hover/open color.
`Toolbar.Separator` renders the Cubitt `Separator` component with toolbar-sized
vertical heights, so separator color remains context-aware.
`Toolbar.Breadcrumb` adapts breadcrumb slots for toolbar heading scale while
leaving links, menus, route state, and path data with the consumer.
## Usage [#usage]
```tsx
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
```
```tsx
Files18{actions}
```
## Examples [#examples]
### Default [#default]
```tsx
import { Button } from "@tilt-legal/cubitt-components/button";
import {
ToggleGroup,
ToggleGroupItem,
} from "@tilt-legal/cubitt-components/toggle-group";
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import {
Grid,
Menu,
Plus,
SortArrows,
} from "@tilt-legal/cubitt-icons/ui/outline";
export default function Example() {
return (
Files18
);
}
```
### Sizes [#sizes]
```tsx
import { Button } from "@tilt-legal/cubitt-components/button";
import {
ToggleGroup,
ToggleGroupItem,
} from "@tilt-legal/cubitt-components/toggle-group";
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import { Grid, Menu, SortArrows } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Example() {
return (
{(["sm", "md", "lg"] as const).map((size) => (
{size.toUpperCase()} toolbar12
))}
);
}
```
### With Search [#with-search]
```tsx
import { useState } from "react";
import { Button } from "@tilt-legal/cubitt-components/button";
import { Input } from "@tilt-legal/cubitt-components/input";
import { SearchExpand } from "@tilt-legal/cubitt-components/search-expand";
import {
ToggleGroup,
ToggleGroupItem,
} from "@tilt-legal/cubitt-components/toggle-group";
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import { Grid, Menu, Plus, Xmark } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Example() {
const [query, setQuery] = useState("");
return (
Documents42
setQuery(event.currentTarget.value)}
placeholder="Search files"
size="md"
value={query}
/>
);
}
```
### Breadcrumb [#breadcrumb]
```tsx
import {
BreadcrumbIcon,
BreadcrumbItem,
BreadcrumbLabel,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbOverflowItem,
BreadcrumbOverflowMenu,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/breadcrumb";
import { Button } from "@tilt-legal/cubitt-components/button";
import { FilesFolderIcon } from "@tilt-legal/cubitt-components/files";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@tilt-legal/cubitt-components/tooltip";
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import { Plus, SortArrows } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Example() {
const hiddenFolders = [
{ id: "matter", label: "Matter" },
{ id: "disclosure", label: "Disclosure" },
];
return (
Files/
{hiddenFolders.map((folder) => (
{folder.label}
))}
/
Matter
}
/>
Matter
/
Disclosure
/
Closing Set
);
}
```
### Title Trigger [#title-trigger]
```tsx
import { useState } from "react";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
Menu,
MenuContent,
MenuRadioGroup,
MenuRadioItem,
MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import { Dots } from "@tilt-legal/cubitt-icons/ui/outline";
export default function Example() {
const [activePanel, setActivePanel] = useState("files");
const panels = [
{ id: "files", label: "Files" },
{ id: "instructions", label: "Instructions" },
{ id: "links", label: "Links" },
];
const activeLabel =
panels.find((panel) => panel.id === activePanel)?.label ?? "";
return (
Attach
);
}
```
## API Reference [#api-reference]
### Toolbar [#toolbar]
| Prop | Type | Default | Description |
| ----------- | ---------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Scales toolbar-owned spacing, separator height, title text, count text, and title trigger text. Pass matching sizes to composed controls. |
| `wrap` | `boolean` | `false` | Allows toolbar contents to wrap when horizontal space is constrained. |
| `className` | `string` | - | Overrides or extends root toolbar styles. |
| `children` | `ReactNode` | - | Toolbar content. |
Also accepts standard `div` props.
### Toolbar.Heading [#toolbarheading]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------------------------------------------- |
| `className` | `string` | - | Overrides or extends the heading region. |
| `children` | `ReactNode` | - | Usually `Toolbar.Title`, `Toolbar.TitleTrigger`, and `Toolbar.Count`. |
Also accepts standard `div` props.
### Toolbar.Title [#toolbartitle]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------------------------------------- |
| `className` | `string` | - | Overrides or extends title text styles, including size when needed. |
| `children` | `ReactNode` | - | Title content. |
Also accepts standard `div` props.
### Toolbar.Breadcrumb [#toolbarbreadcrumb]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ------------------------------------------------------------------------------- |
| `className` | `string` | - | Overrides or extends toolbar breadcrumb layout and scale styles. |
| `children` | `ReactNode` | - | Primitive breadcrumb composition, usually `BreadcrumbList` and its child slots. |
Also accepts primitive `Breadcrumb` props.
### Toolbar.TitleTrigger [#toolbartitletrigger]
| Prop | Type | Default | Description |
| ------------- | ----------- | ----------------- | --------------------------------------------------- |
| `showChevron` | `boolean` | `true` | Shows the trailing chevron. |
| `chevron` | `ReactNode` | `` | Custom trailing indicator. |
| `className` | `string` | - | Overrides or extends the title trigger text styles. |
| `children` | `ReactNode` | - | Active adjacent label. |
Also accepts `Button` props. The trigger uses Button's `unstyled` mode internally.
### Toolbar.Count [#toolbarcount]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------------- |
| `className` | `string` | - | Overrides or extends count text styles. |
| `children` | `ReactNode` | - | Count content. |
Also accepts standard `span` props.
### Toolbar.Group And Toolbar.Actions [#toolbargroup-and-toolbaractions]
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------------- |
| `className` | `string` | - | Overrides or extends the control group. |
| `children` | `ReactNode` | - | Grouped controls. |
Both accept standard `div` props.
### Toolbar.Spacer [#toolbarspacer]
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ----------------------------------------- |
| `className` | `string` | - | Overrides or extends the flexible spacer. |
Also accepts standard `div` props.
### Toolbar.Separator [#toolbarseparator]
| Prop | Type | Default | Description |
| ------------- | ---------------------------- | ------------ | ------------------------------------------------------------------- |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Separator direction. Vertical separators get toolbar-sized heights. |
| `className` | `string` | - | Overrides or extends separator styles. |
Also accepts Cubitt `Separator` props.