# Toolbar

A container for grouping related actions or controls.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { AlignCenter, AlignLeft, AlignRight, DollarSign, Percent } from "@lucide/svelte";
import {
	Button,
	Select,
	SelectItem,
	SelectPopup,
	SelectTrigger,
	SelectValue,
	ToggleGroup,
	ToggleGroupItem,
	Toolbar,
	ToolbarButton,
	ToolbarGroup,
	ToolbarSeparator,
} from "coss-svelte";

const fonts = [
	{ label: "Helvetica", value: "helvetica" },
	{ label: "Arial", value: "arial" },
	{ label: "Times New Roman", value: "times-new-roman" },
];
</script>

<Toolbar aria-label="Formatting options">
	<ToggleGroup class="border-none bg-transparent p-0 shadow-none" value="left">
		<ToggleGroupItem value="left" aria-label="Align left"><AlignLeft /></ToggleGroupItem>
		<ToggleGroupItem value="center" aria-label="Align center"><AlignCenter /></ToggleGroupItem>
		<ToggleGroupItem value="right" aria-label="Align right"><AlignRight /></ToggleGroupItem>
	</ToggleGroup>
	<ToolbarSeparator />
	<ToolbarGroup>
		<ToolbarButton aria-label="Format as currency"><DollarSign class="size-4" /></ToolbarButton>
		<ToolbarButton aria-label="Format as percent"><Percent class="size-4" /></ToolbarButton>
	</ToolbarGroup>
	<ToolbarSeparator />
	<Select value="helvetica" options={fonts}>
		<SelectTrigger aria-label="Font family" class="w-44"><SelectValue /></SelectTrigger>
		<SelectPopup>
			{#each fonts as font}
				<SelectItem value={font.value} label={font.label}>{font.label}</SelectItem>
			{/each}
		</SelectPopup>
	</Select>
	<ToolbarSeparator />
	<Button>Save</Button>
</Toolbar>

```

## Anatomy

- `Toolbar`
- `ToolbarButton`
- `ToolbarGroup`
- `ToolbarGroupItem`
- `ToolbarLink`
- `ToolbarSeparator`

## API Reference

### Toolbar

A container for grouping related actions or controls.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `Orientation` | `"horizontal"` | Layout direction for the component. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Toolbar.Root](https://bits-ui.com/docs/components/toolbar#root).

### ToolbarButton

Renders a button-shaped control for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Toolbar.Button](https://bits-ui.com/docs/components/toolbar#button).

### ToolbarGroup

Groups related items inside the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | `"button"` | Behavior, selection, or HTML type passed to the underlying control. |
| `bind:value` | `string \| string[]` | `""` | Current value for the component. Bind with `bind:value` when supported. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Toolbar.Group](https://bits-ui.com/docs/components/toolbar#group).

### ToolbarGroupItem

Renders one item inside a toolbar group.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Toolbar.GroupItem](https://bits-ui.com/docs/components/toolbar#group-item).

### ToolbarLink

Renders a link-styled navigation item.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Toolbar.Link](https://bits-ui.com/docs/components/toolbar#link).

### ToolbarSeparator

Visually separates related content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Layout direction for the component. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Layout & Navigation |
| Particles | 1 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/toolbar.json` for the complete local file and dependency closure.
- Toolbar is stable in the current source catalog.