# DiagramToolbar

A bar of actions belonging to the surface underneath them.

- Group: Diagrams
- Import: `import { DiagramToolbar } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/diagram-toolbar/
- Related: floating-icon-button, diagram-export-menu

## When to reach for it

FloatingIconButton is one pinned action. This is the container for several, so they read as one object rather than as a scatter.

## Accessibility

- role="toolbar" announces a toolbar rather than six unrelated buttons. It does not implement roving focus — Tab visits every control, which is honest for a bar of three.

## DiagramToolbar

A bar of actions that belong to the surface underneath them. The package already has `FloatingIconButton` for ONE pinned action. This is the container for several — which is a different problem, because several pinned buttons need to read as one object rather than as a scatter: one plate, one border, hairlines between the groups, and a single `role="toolbar"` so a screen reader announces a toolbar instead of six unrelated buttons. `role="toolbar"` also changes the keyboard contract, and callers should know what they are opting into: arrow keys are expected to move between the controls and Tab is expected to leave the bar. This component does not implement roving focus for you — a bar of three buttons where Tab visits all three is honest and fine — so pass `placement="inline"` and skip the role by using a plain `<div>` if that is not what you want.

### Props

- `children` (required) — `ReactNode`.
- `placement` — `'inline' | 'floating'` default `'inline'`. Where it sits. `floating` pins it over the surface it acts on.
- `align` — `'start' | 'end'` default `'end'`. Which corner a floating bar pins to.
- `label` (required) — `string`.

Also accepts: `Omit<ComponentProps<'div'>, 'children'>`.

## DiagramToolbarGroup

One run of related controls inside the bar. Separated by a hairline rather than by space, because a gap large enough to read as a group boundary is also large enough to stop the bar reading as one object — which is the whole reason the controls were collected into a bar.

## Example — default

```tsx
import { Button } from '@misoto22/design'
import { DiagramToolbar, DiagramToolbarGroup } from '@misoto22/design/diagrams'

<DiagramToolbar label="Diagram actions">
  <DiagramToolbarGroup>
    <Button size="sm" variant="ghost">
      Theme
    </Button>
    <Button size="sm" variant="ghost">
      Style
    </Button>
  </DiagramToolbarGroup>
  <DiagramToolbarGroup>
    <Button size="sm" variant="ghost">
      Present
    </Button>
    <Button size="sm" variant="secondary">
      Export
    </Button>
  </DiagramToolbarGroup>
</DiagramToolbar>
```