Toolbar

Recipe CSS

This is the exact CSS your kit ships for Toolbar — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Toolbar ===
   A composition primitive: a horizontal row of controls (search, filters,
   selects, action buttons) that GUARANTEES every direct control child shares
   one height. Tokens make values consistent; they can't stop you putting a
   .btn--sm next to a default .in — this recipe can. It forces all direct
   .btn / .in / .select / .select-trigger children onto a single shared
   height (--tb-h), so adjacent controls always line up regardless of the
   size modifier each carries. Use .toolbar instead of a bare .card__row
   whenever you place mixed controls side by side.
     .toolbar         → md height (the stature default; matches plain controls)
     .toolbar--sm     → compact bar (dense app/table toolbars)
     .toolbar__spacer → flex gap that pushes trailing controls to the right */
.toolbar {
  --tb-h: var(--k-control-h-md);
  display: flex;
  align-items: center;
  /* The gap here separates UNRELATED items/groups — comfortable (--k-space).
     RELATED controls (a filter pair, a label+select, a button cluster) go in a
     .toolbar__group, which sits tight (8px). Two gap levels = the eye reads
     what belongs together. This is the structural answer to "buttons should be
     closer than separate groups": grouping, not one flat gap. */
  gap: var(--k-space, 8px);
  flex-wrap: wrap;
}
.toolbar--sm { --tb-h: var(--k-control-h-sm); }
/* A cluster of related controls — tight 8px between members, so an [Epic][Type]
   filter pair reads as one unit while still sitting --k-space away from the
   search field or the avatar stack. */
.toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--k-gap, var(--k-s-8));
}
/* An inline label that names the control next to it ("Group by", "Sort"). The
   eyebrow tier so it reads as a quiet annotation, not a control. A reusable
   primitive instead of ad-hoc inline styles, so a label+select cluster is
   rebuildable from the export — not preview-only. NOT in the height-invariant
   selector below: it's text, vertically centered by the group, not a control. */
.toolbar__label {
  font-size: var(--k-type-eyebrow);
  font-weight: var(--k-weight-medium);
  color: var(--k-fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--k-track-eyebrow);
  white-space: nowrap;
}
/* Height is forced on controls whether they sit directly in the bar or inside
   a group, so grouping never breaks the one-height invariant. */
.toolbar > .btn,
.toolbar > .in,
.toolbar > .searchinput,
.toolbar > .select,
.toolbar > .select-trigger,
.toolbar > .segctrl,
.toolbar__group > .btn,
.toolbar__group > .in,
.toolbar__group > .searchinput,
.toolbar__group > .select,
.toolbar__group > .select-trigger,
.toolbar__group > .segctrl {
  min-height: var(--tb-h);
  height: var(--tb-h);
}
/* C8 — the invariant is DEFAULT-ON. The enumerated controls above get an EXACT
   height; every OTHER direct child of the bar (or a group) gets the bar height
   as a FLOOR, so a control the kit hasn't listed (numinput, taginput, slider, a
   future atom) can't silently escape and break the single-height row. Opt-outs
   are the non-controls: the inline label (text) and the spacer (empty flex). */
.toolbar > *,
.toolbar__group > * {
  min-height: var(--tb-h);
}
.toolbar > .toolbar__label,
.toolbar__group > .toolbar__label,
.toolbar > .toolbar__spacer {
  min-height: 0;
}
.toolbar__spacer { flex: 1 1 auto; min-width: 0; }