# Toolbar

Accessible toolbar landmark for grouped controls. Place actions in `startContent`, optional `centerContent`, and `endContent`. A required `label` becomes the toolbar’s `aria-label`.

## Examples

### Default

Start and end slots with buttons — flex layout when center is omitted.

```tsx
import { Button, Toolbar } from '@var-ui/react';

<Toolbar
  label="Document actions"
  startContent={<Button>Bold</Button>}
  endContent={<Button>Share</Button>}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Slots

Provide `startContent`, `centerContent`, and `endContent` together; center forces a grid layout so the middle stays visually centered.

```tsx
import { Button, IconButton, Toolbar } from '@var-ui/react';

<Toolbar
  label="Editor toolbar"
  startContent={
    <>
      <IconButton name="menu" aria-label="Menu" />
      <IconButton name="search" aria-label="Search" />
    </>
  }
  centerContent={<Button intent="secondary">Untitled</Button>}
  endContent={<Button intent="primary">Share</Button>}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| label | string | yes |  | Accessible label for the toolbar (required — applied as aria-label). |
| centerContent | ReactNode | no |  | Content centered between the start and end slots; forces a grid layout. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| endContent | ReactNode | no |  | Content aligned to the end (trailing) edge. |
| orientation | "horizontal" \| "vertical" \| undefined | no | horizontal | Layout axis. |
| size | ControlSize \| undefined | no | md | Control density. |
| startContent | ReactNode | no |  | Content aligned to the start (leading) edge. |

## Accessibility

Renders `role="toolbar"` with `aria-label` from `label` and `aria-orientation` from `orientation`. Children keep their natural tab order — there is no roving tabindex / arrow-key navigation yet. Ensure each child control has its own accessible name.