# Toolbar

> A bordered, tinted panel that groups a set of interactive controls — buttons, toggles, menus — along a single axis.

```ts
import { Toolbar } from "@sdxc/ui";
```

Renders a bordered, tinted panel grouping a set of interactive controls
along one axis. The host carries the `toolbar` role and lays its children
out as a row by default, flipping to a column when `aria-orientation="vertical"`.

## Examples

```tsx
<Toolbar aria-label={t("editor.toolbar")}>
	<Button variant="ghost"><ScissorsIcon /></Button>
	<Button variant="ghost"><CopyIcon /></Button>
	<Button variant="ghost"><ClipboardIcon /></Button>
</Toolbar>
```

```tsx
<Toolbar aria-label={t("editor.toolbar")} aria-orientation="vertical">
	<Button variant="ghost"><BoldIcon /></Button>
	<Button variant="ghost"><ItalicIcon /></Button>
</Toolbar>
```

## Props

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis the toolbar's controls lay out along: a single row, or a single column. |