## Overview [#overview]
`Toolbar` provides consistent shell spacing for dense UI surfaces without
owning 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 the controls you compose inside the
toolbar so the full row follows one density.
Use `Toolbar.TitleTrigger` next to `Toolbar.Title` for a title-adjacent
selection label, such as `Attach Files`. It moves from muted text to foreground
text on hover and while its menu is open.
Use `Toolbar.Breadcrumb` when the heading becomes a path. It styles the
primitive breadcrumb slots for toolbar heading scale while leaving links,
overflow menus, route state, and folder data with the consumer. Use text
separators such as `/` for path-like toolbar headings. Collapse states are
explicit composition: render `BreadcrumbIcon`, `BreadcrumbLabel`,
`BreadcrumbOverflowMenu`, and tooltips from consumer-owned path data.
## Usage [#usage]
```tsx
import { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
Files
18
{actions}
;
```
## Examples [#examples]
### 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";
{(["sm", "md", "lg"] as const).map((size) => (
{size.toUpperCase()} toolbar
12
))}
```
### With Search [#with-search]
```tsx
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";
Documents
42
setQuery(event.currentTarget.value)}
/>
```
### 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 { Toolbar } from "@tilt-legal/cubitt-components/toolbar";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@tilt-legal/cubitt-components/tooltip";
import { FilesFolderIcon } from "@tilt-legal/cubitt-components/files";
const hiddenFolders = [
{ id: "matter", label: "Matter" },
{ id: "disclosure", label: "Disclosure" },
];
const widthClassName = "w-[28rem]";
Files
/
{hiddenFolders.map((folder) => (
{folder.label}
))}
/
Matter
}
/>
Matter
/
Disclosure
/
Closing Set
```
### Title Trigger [#title-trigger]
```tsx
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";
const activeLabel =
panels.find((panel) => panel.id === activePanel)?.label ?? "";
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 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 styles. |
| `children` | `ReactNode` | - | Active adjacent label. |
Also accepts `Button` props.
### 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 primitive `Separator` props.