Toolbar

Installation

pnpm add @advui/core

npm install @advui/core

Usage

import { Button, Toolbar } from '@advui/core'

<Toolbar aria-label="Project actions" variant="outline">
  <Button size="sm">New</Button>
  <Button size="sm" variant="outline">Edit</Button>
  <Toolbar.Separator />
  <Button size="sm" variant="outline">Delete</Button>
</Toolbar>

Examples

API reference

Regions

Each region given gets one box; a missing one adds nothing. Children go between leading and center.

Accessibility

• By default a group named by aria-label: every control keeps its own Tab stop and its own name.
• role="toolbar" is the WAI-ARIA toolbar on web: one Tab stop (the control used last, else the first), and the arrow keys along the orientation, Home and End move between enabled controls, wrapping at the ends. It sets aria-orientation. Use it for buttons, toggles, Toggle Groups, checkboxes and menu triggers.
• In a toolbar, text fields, selects, sliders and spin buttons keep their own Tab stop and their arrow keys (the caret, the value); the arrow keys pass over them. With several fields, keep the default group.
• Keys a control uses first are left to it: an open menu (portalled content is ignored), or any handler that prevents the default. A Toggle Group inside a toolbar hands its arrow keys to the toolbar, so they move out of the group; Space or Enter chooses.
• Disabled controls are skipped by the arrow keys. Toolbar has no disabled of its own: disable controls one by one, or put fields in a disabled Form.
• Separators are decorative (hidden from assistive technology) unless decorative={false}. Groups are role="group"; name them when the name helps.
• Toolbar never clips its content, so focus rings stay visible; it sets no fixed height, so larger text grows it.

Responsive behavior

Toolbar fills the width of a column and sizes to its content in a row. On narrow screens leading and center shrink first (a title wraps, a search field with flex={1} narrows); trailing keeps its size. On web, leading, trailing and a text center never shrink below their content, so they do not run into each other; a center holding a control that cannot shrink (a Toggle Group) needs wrap. Give bars that must fit phone widths wrap: controls and regions move onto new lines, a wrapped trailing region wraps its own controls, and it stays at the end edge (the left one in right-to-left layouts). align and distribute take breakpoint maps; for anything else use flat values such as gap="2 md:3". Toolbar never turns controls into a menu: show a Dropdown Menu for the overflow yourself (with Show / Hide).

Platform notes

Related components