pnpm add @wandercom/design-system-web

import { IconArrowDown } from '@central-icons-react/round-outlined-radius-2-stroke-1.5/IconArrowDown';
import { IconArrowUp } from '@central-icons-react/round-outlined-radius-2-stroke-1.5/IconArrowUp';
import { IconTrashCan } from '@central-icons-react/round-outlined-radius-2-stroke-1.5/IconTrashCan';
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from '@wandercom/design-system-web/ui/toolbar';

export function Example() {
  return (
    <Toolbar aria-label="Property card actions">
      <ToolbarGroup>
        <ToolbarButton aria-label="Move up">
          <IconArrowUp />
        </ToolbarButton>
        <ToolbarButton aria-label="Move down">
          <IconArrowDown />
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarButton aria-label="Delete">
        <IconTrashCan />
      </ToolbarButton>
    </Toolbar>
  );
}

The default example shows the typical layout — two grouped actions, a separator, two more grouped actions, another separator, and a delete action. The floating variant (default) renders the toolbar as a blurred, elevated surface intended to hover over canvas-style content like cards or media.

Toolbar is built on Base UI's Toolbar primitive. The root provides the surface (defined per variant) and the role="toolbar" landmark with arrow-key roving focus. Inside, place any combination of:

• ToolbarGroup — a logical cluster of related buttons (2px gap inside the cluster, 4px gap between siblings of the toolbar root). Wraps Toolbar.Group so a whole cluster can be disabled at once via the disabled prop.
• ToolbarSeparator — a 1×16 hairline divider between groups, rendered as Toolbar.Separator.
• ToolbarButton — a 32×32 ghost icon button rendered as Toolbar.Button, with hover, focus-visible, and pressed states.

The root accepts arbitrary children, so popup triggers, toggles, or other primitives can be dropped in alongside the standard subcomponents.

Use Base UI's render prop on ToolbarButton to delegate rendering to another primitive while keeping the toolbar's button styles. This is the recommended pattern when wrapping a Menu.Trigger, Popover.Trigger, or Dialog.Trigger.

<Menu.Root>
  <ToolbarButton aria-label="More actions" render={<Menu.Trigger />}>
    <IconDotsHorizontal />
  </ToolbarButton>
  <Menu.Portal>{/* … */}</Menu.Portal>
</Menu.Root>

Tooltips work the other way around — Base UI's recommended pattern is to pass a ToolbarButton to Tooltip.Trigger's render prop:

<Tooltip.Root>
  <Tooltip.Trigger render={<ToolbarButton aria-label="Delete" />}>
    <IconTrashCan />
  </Tooltip.Trigger>
  <Tooltip.Portal>{/* … */}</Tooltip.Portal>
</Tooltip.Root>

For toggle-style buttons, drive the visual state via aria-pressed (toggle semantics) or data-state="on" (when composed under a primitive that already manages state).

<ToolbarButton aria-label="Edit" aria-pressed={isEditing}>
  <IconPencil />
</ToolbarButton>

Plus all props from Base UI Toolbar.Root.

Plus all props from Base UI Toolbar.Group.

Plus all props from Base UI Toolbar.Separator.

Plus all props from Base UI Toolbar.Button.

• The toolbar root renders as role="toolbar" with aria-orientation and an aria-label, so it is exposed as a landmark to assistive tech.
• Roving focus is handled by Base UI: only one toolbar item is in the page tab sequence at a time, and arrow keys move between items (ArrowLeft/ArrowRight for horizontal, ArrowUp/ArrowDown for vertical). Home and End jump to the first and last items. Press Tab to leave the toolbar.
• ToolbarGroup is a visual cluster — it controls the in-cluster gap (2px) versus the inter-cluster gap (4px) on the toolbar root, and forwards a disabled prop to every contained item.
• ToolbarSeparator is rendered as Toolbar.Separator with role="separator" and an inverse orientation to the toolbar.
• ToolbarButton is icon-only. Always pass an aria-label so screen readers can announce the action.
• Pressed state can be expressed via either aria-pressed (toggle semantics) or data-state="on" (when composed under a primitive that drives state, like a Menu.Trigger). Both styles light up the same pressed background.
• focus-visible shows a 2px ring rendered with a 1px gap from the button edge, so the indicator stays legible against both the toolbar surface and the underlying canvas.

• The toolbar is w-fit — it never stretches to fill its container. Wrap it in a positioning element when overlaying canvas content.
• Disabled items are skipped by the roving focus by default. Pass focusableWhenDisabled on ToolbarButton to keep them reachable so screen readers can announce the disabled state.
• When using render to swap in another primitive's trigger, that primitive owns the underlying element type (button, anchor, etc.) — Base UI merges the toolbar button's props and refs onto it.