Toolbar · Porchlight

The .c-toolbar groups actions above a table, list, or canvas. A leading cluster (search, filters) and a trailing cluster (primary actions) wrap independently on narrow containers.

By default, toolbar styling is flush so it can attach to a data region, app shell edge, or card interior without creating a second card. Add data-surface="panel" when the toolbar stands alone on a page background. Add data-surface="flush" when a parent surface should own all borders and fill.

When to use

Above a data table (search, filter, export, create).
Inside a card header (title + actions).
In a table footer (results count + pagination).

Semantic HTML

<div class="c-toolbar">
  <div class="c-toolbar__group">
    <input class="c-field__control" type="search" placeholder="Search…" />
    <button class="c-button" data-variant="ghost">Filter</button>
  </div>
  <div class="c-toolbar__group">
    <div class="c-toolbar__divider"></div>
    <button class="c-button" data-variant="primary">New item</button>
  </div>
</div>

<div class="c-toolbar" data-surface="panel">...</div>

Class contract

Selector	Role
`.c-toolbar`	The container (flex + wrap + container query).
`.c-toolbar__group`	A cluster of actions. Last-child aligns right.
`.c-toolbar__divider`	A thin vertical separator.
`[data-surface="panel"]`	Standalone bordered toolbar surface.
`[data-surface="flush"]`	Transparent toolbar inside another surface.

Tokens consumed

--pl-color-{surface,border}, --pl-space-{2,3}, --pl-radius-{md,lg}.