The Extract Toolbar — One Button Shape
A toolbar with three different button shapes doesn't look rich: it looks like it was assembled by people who never spoke to each other. And it isn't only a matter of taste — buttons of different heights in the same row are visibly misaligned, because centering items of different sizes does not make them equal.
In , the top bar — the same one in the Advanced editor, in the Assistant and in the data preparation screen — has one control shape and one single row.
The canonical control
Every item in the bar is a pill: fully rounded corners, 12px bold text, a 14px icon on the left when there is one, and 32px tall (44px on touch screens). The reference is the Assistant / Advanced pair, the selector that already had that shape.
| Property | Value | M3 token |
|---|---|---|
| Height | var(--tb-alt) — 32px, 44px on mobile | — |
| Corners | 999px (pill) | — |
| Text | 12px / weight 700 | --md-on-surface |
| Background (regular) | var(--bg2) | --md-surface-container-low |
| Border (regular) | 1.5px solid var(--border) | --md-outline-variant |
| Background (primary) | var(--accent) | --md-primary |
| Text (primary) | var(--md-on-primary) | --md-on-primary |
| Destructive | text and border in var(--red) | --md-error |
| Disabled | opacity:.4 plus no response to clicks | — |
.toolbar-btn{height:var(--tb-alt);padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:var(--bg2);color:var(--text)}
.toolbar-btn.primary{background:var(--accent);color:var(--md-on-primary);border-color:var(--accent)}Three families that became one
| Before | Now |
|---|---|
| Assistant / Advanced — segmented pill, filled active item | kept: it became the reference |
| BATCH / STREAM — outlined pill with its own palette and height | same segmented control; the continuous mode is told apart by the color of the active item (green), not by its shape |
| Actions (Organize, Undo, Redo, Versions, Validate, Save, Schedule, Run) — medium-radius rectangles, 13px | pill, 12px, same height as the rest |
The package state badges (ACTIVE, PAUSED, DRAFT) and the open-package badge follow the same height and shape: they are not buttons, but they share the row, and a shorter badge would misalign everything to its right.
One row, always
The bar never wraps into a second row. When the content does not fit:
- the package name shrinks first (with an ellipsis, never a cut in the middle of a word);
- below 1600px wide the decoration goes — the wordmark, the collaborators icon and the separator rule. None of them is a control or information about the package, and dropping them is what keeps Run, the primary button, visible;
- only then does the bar scroll horizontally. Scrolling keeps everything reachable; clipping does not — and what clipping used to hide were precisely the buttons on the right, the action ones.
On touch screens the bar still keeps a single row, with horizontal scrolling and 44px targets.
The rule behind it
The bar's rules live in a single stylesheet, extract-toolbar.css, and no page redefines toolbar buttons in its local CSS.
Breaking that rule is what produced the three shapes: the same CSS block was copied in three places — the two Extract pages and the Assistant mode stylesheet — and the copies drifted in height, corner radius and font size. One of them also used a more specific selector than the others, so fixing one side never reached the other.
When building a new screen with an Extract toolbar: import the shared stylesheet and use .toolbar, .toolbar-btn, .modo-switch and .toolbar-chip. If a variant is missing, add it to the shared stylesheet — never as a local exception.
See also
- Text field pattern
- Redesign 2026 — visual identity
- DATTA Extract guide