Toolbar

A row of related controls (formatting buttons, view options, a menu) that is a single Tab stop; the arrow keys move between its controls.

BetaSource

import { DropdownMenu, Toolbar, VisuallyHidden } from "@meridui/react";

export function Example() {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  return (
    <Toolbar.Root aria-label="Text formatting">
      <Toolbar.Group aria-label="Style">
        <Toolbar.Button aria-pressed={bold} onClick={() => setBold(!bold)}>
          <strong aria-hidden="true">B</strong>
          <VisuallyHidden>Bold</VisuallyHidden>
        </Toolbar.Button>
        <Toolbar.Button aria-pressed={italic} onClick={() => setItalic(!italic)}>
          <em aria-hidden="true">I</em>
          <VisuallyHidden>Italic</VisuallyHidden>
        </Toolbar.Button>
        <Toolbar.Button disabled>
          <s aria-hidden="true">S</s>
          <VisuallyHidden>Strikethrough</VisuallyHidden>
        </Toolbar.Button>
      </Toolbar.Group>
      <Toolbar.Separator />
      <DropdownMenu.Root>
        <DropdownMenu.Trigger asChild>
          <Toolbar.Button>Align: {align}</Toolbar.Button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>{/* Left, Center, Right */}</DropdownMenu.Content>
      </DropdownMenu.Root>
      <Toolbar.Separator />
      <Toolbar.Link href="/help/formatting">Help</Toolbar.Link>
    </Toolbar.Root>
  );
}

Import

import { Toolbar } from "@meridui/react";

Anatomy

<Toolbar.Root aria-label="…">
  <Toolbar.Group aria-label="…">
    <Toolbar.Button />
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Link />
</Toolbar.Root>

Root is the role="toolbar" element. Give it an aria-label.
Button and Link are the items the arrow keys move between. With asChild any element joins, e.g. a DropdownMenu.Trigger.
Group (role="group") and Separator organise the items.

Examples

Toggle buttons

A formatting toggle is a Toolbar.Button with aria-pressed; the pressed state gets the accent-soft fill. For a set where only one can be on, keep the state in your component.

Wrap a Toolbar.Button in DropdownMenu.Trigger asChild, as in the example above. The menu opens with Enter, Space or ArrowDown; closing it returns focus to the toolbar.

API reference

Root

Accepts every <div> attribute.

Prop	Type	Default	Description
`aria-label`	`string`	–	Accessible name; required unless you pass aria-labelledby.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout and arrow-key axis.
`loop`	`boolean`	`true`	Wrap from the last item to the first.
`ref`	`Ref<HTMLDivElement>`	–	Forwarded ref.

Button

Accepts every <button> attribute.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Sets aria-disabled and blocks clicks; skipped by the arrow keys.
`asChild`	`boolean`	`false`	Render the single child element instead of a <button>.
`ref`	`Ref<HTMLButtonElement>`	–	Forwarded ref.

Link, Group, Separator

Link accepts every <a> attribute and asChild. Group and Separator accept every <div> attribute; the separator's aria-orientation is set perpendicular to the toolbar.

Styling

Class	Element
`.mrd-toolbar`	Root
`.mrd-toolbar__group`	Group
`.mrd-toolbar__button`, `.mrd-toolbar__link`	Button and Link (unless `asChild`)
`.mrd-toolbar__separator`	Separator

Attribute	On	Values
`data-orientation`	Root	`horizontal`, `vertical`
`aria-pressed`	Button	`true` gets the pressed style
`data-disabled`	Button	present when disabled

Accessibility

Follows the WAI-ARIA Toolbar pattern with a roving tabindex: only one item is in the Tab sequence, and the toolbar remembers the last focused item. Right and Left follow reading direction in RTL.

Key	Action
`Tab`	Move into the toolbar (to the last focused item) or out of it.
`ArrowRight`	Next item, wrapping (ArrowDown when vertical).
`ArrowLeft`	Previous item, wrapping (ArrowUp when vertical).
`Home`	First item.
`End`	Last item.
`EnterSpace`	Activate the focused button.

Guidelines

Group three or more related controls that act on the same thing, like the text in an editor.

Avoid

Wrap a page's unrelated buttons in a toolbar just for the look; each would lose its own Tab stop.

DropdownMenu: menus inside a toolbar.
SegmentedControl: switch between a few views.