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.

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

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

Slots

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

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>}
/>

Props

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.