Components

Toolbar

A horizontal bar that aligns controls on one row — buttons, a segmented control, a search field. Cluster related controls with .ds-toolbar__group and push the rest to the far edge with a flexible .ds-toolbar__spacer. The default bar carries a 1px bottom rule; --bordered boxes it fully.

Groups and spacer

A left group of actions, a .ds-toolbar__spacer that eats the free space, and a right group — the spacer pushes the two clusters to opposite edges.

Group · spacer · group

<div class="ds-toolbar" role="toolbar">
  <div class="ds-toolbar__group">
    <button class="ds-button ds-button--primary">New</button>
    <button class="ds-button">Import</button>
  </div>
  <div class="ds-toolbar__spacer" aria-hidden="true"></div>
  <div class="ds-toolbar__group">
    <button class="ds-button">Export</button>
    <button class="ds-button ds-button--danger">Delete</button>
  </div>
</div>

Bordered · search · segmented

The --bordered variant boxes the bar in a 1px rule. It mixes a search .ds-input, a .ds-segmented control and buttons on the same row.

ds-toolbar--bordered

<div class="ds-toolbar ds-toolbar--bordered" role="toolbar">
  <input class="ds-input" type="search" placeholder="Search rows…" aria-label="Search">
  <div class="ds-segmented">
    <button class="ds-segmented__item is-active" aria-pressed="true">All</button>
    <button class="ds-segmented__item" aria-pressed="false">Active</button>
    <button class="ds-segmented__item" aria-pressed="false">Archived</button>
  </div>
  <div class="ds-toolbar__spacer" aria-hidden="true"></div>
  <button class="ds-button">Filters</button>
</div>

React

Compose Toolbar with ToolbarGroup and ToolbarSpacer; drop any controls (Button, Segmented, Input) inside. Pass bordered for the boxed variant.

import { Toolbar, ToolbarGroup, ToolbarSpacer, Button, Input } from "@diametral/design-system/react";

<Toolbar bordered>
  <Input type="search" placeholder="Search rows…" />
  <ToolbarSpacer />
  <ToolbarGroup>
    <Button>Export</Button>
    <Button variant="primary">New</Button>
  </ToolbarGroup>
</Toolbar>