Toolbar

Summary

An action row above content: a title at the start, controls at the inline end, hairline separators between control groups. It works directly on the bare page tint (above a table or list) or inside a widget header for per-widget controls. Toolbar buttons are usually soma-button-compact; any of them can be a dropdown trigger or a joined .soma-buttons segment group.

When to use

Context	Use it for
`.soma-toolbar` above a table or list	Actions scoped to that content region: filter, sort, export, bulk operations.
`.soma-toolbar` in a widget header	Per-widget controls on a dashboard — refresh, time range, export.
`.soma-page-header-actions`	Actions on the page's subject itself (Edit / Delete on a detail page). See Page header.
`.soma-navgroup`	Switching between views. That's navigation, not actions — see Navigation.

Examples

Any toolbar button can be a dropdown2 trigger, live:

soma-dropdown2-trigger + aria-controls — the chevron grows automatically and dropdown2's auto-init binds the menu; the toolbar itself needs no JS.

Name	Role	Status
Anna Nelson	Admin	active
Marcus Delgado	Developer	active
Jessica Stone	Viewer	invited

The toolbar above sits inside .soma-widget-header for per-widget controls with soma-button-compact buttons.

Composition & wrapping

The toolbar is a flex row and its children are ordinary components. Everything documented for buttons works inside it: compact variants, icon buttons, segmented .soma-buttons groups, split buttons, and dropdown2 triggers (auto-init binds them wherever they sit). The -spacer is a flexible gap; everything after it sits flush at the inline end (mirrored under RTL). -separator hairlines mark group boundaries: cheap visual grammar for "these controls belong together". On narrow screens the row wraps (flex-wrap) — controls flow onto further lines rather than overflowing, so put the most important control last (it stays visually distinct as the primary even when wrapped). Give the title a heading level that fits the page outline: h2 on the page tint, h3 inside a widget header; the style is identical.

HTML

The basic row. The spacer pushes everything after it to the inline end:

<div class="soma-toolbar">
  <h2 class="soma-toolbar-title">Applications</h2>
  <span class="soma-toolbar-spacer"></span>
  <button class="soma-button soma-button-compact">Filter</button>
  <span class="soma-toolbar-separator"></span>
  <button class="soma-button soma-button-primary soma-button-compact">Deploy</button>
</div>

A segmented group as one control among others. Separators mark the group boundaries:

<div class="soma-toolbar">
  <h2 class="soma-toolbar-title">Traffic</h2>
  <span class="soma-toolbar-spacer"></span>
  <div class="soma-buttons">
    <button class="soma-button soma-button-compact">Years</button>
    <button class="soma-button soma-button-compact soma-active">Months</button>
    <button class="soma-button soma-button-compact">Days</button>
  </div>
  <span class="soma-toolbar-separator"></span>
  <button class="soma-button soma-button-compact">Refresh</button>
</div>

A dropdown trigger in the toolbar — the menu element lives elsewhere in the page, named by aria-controls:

<div class="soma-toolbar">
  <h2 class="soma-toolbar-title">Findings</h2>
  <span class="soma-toolbar-spacer"></span>
  <button class="soma-button soma-button-compact soma-dropdown2-trigger"
          aria-controls="export-menu">Export</button>
</div>

<div id="export-menu" class="soma-dropdown2" aria-hidden="true">
  <ul>
    <li><a href="#">CSV</a></li>
    <li><a href="#">JSON</a></li>
  </ul>
</div>

Inside a widget header, the same markup with an h3 title:

<header class="soma-widget-header">
  <div class="soma-toolbar">
    <h3 class="soma-toolbar-title">Team</h3>
    <span class="soma-toolbar-spacer"></span>
    <button class="soma-button soma-button-compact">Invite</button>
  </div>
</header>

CSS classes

Class	Effect
`.soma-toolbar`	The action row. Flex, wraps on narrow screens; works on the page tint or inside `.soma-widget-header`.
`.soma-toolbar-title`	The row's heading (`h2`/`h3`): large, semibold, no margin.
`.soma-toolbar-spacer`	Flexible gap — everything after it sits flush at the inline end.
`.soma-toolbar-separator`	Hairline between control groups, stretched to the row height.

JavaScript

None. The toolbar is pure CSS — any behaviour belongs to the controls inside it: dropdown2 triggers auto-init as usual (the live Export menu above needed no page JS), segmented-group and toggle wiring is documented on the Buttons page. This page ships no script of its own.