← Back Office design system
Header toolbaras-is
Right-side action cluster of every list-page header in the client panel: a grey pill grouping the
table actions (columns manager · print · export) plus round buttons for reload,
user menu and support chat. Snapshot source: «Hesablar» (finance balances). Runtime element: <bo-header-toolbar> (components/header-toolbar.js). The columns
dropdown it opens is documented separately in Table columns control,
the user dropdown in User menu.
Assembled toolbar
Pill (36px, radius 30, gap 11, padding 5×10) + reload + user + support. Sits right-aligned in the page header, wraps on narrow widths.
- Pill
- height
36 · padding 5×10 · gap 11 · radius 30 · bg metal-grey #F2F4F7
- Pill icons
- columns
15.6px · text-500 · print 18px · grey-700 · export 16.8px · grey-700; hover → text-500
- Round buttons
36×36 circle, bg #F2F4F7, hover grey-300, active grey-400, margin-left 8- Support button
- bg
primary-50 #DFEFFF, icon primary-500
- Opens
- columns → Table columns control · user → User menu
Pieces
The pill groups table-scoped actions; page-scoped actions stay as separate circles. Keep this split — don't mix table and account actions in one container.
- Table actions (pill)
- columns manager · print · export — any subset keeps the pill; a single action still gets the pill background
- Page actions (circles)
- reload · user menu · support — always separate 36px circles, 8px apart
Date range pill — optional
Shown only on pages with date-filtered content (reports, statistics), to the
left of the toolbar with an 8px gap. Never part of the core cluster — plain list pages (Hesablar) don't render it. Opens the
Date range picker.
- Pill
- height
36 · radius 30 · bg metal-grey #F2F4F7 · margin-right 8 · calendar icon 1.05rem + label body2
- When shown
- only on date-filtered pages (Hesabatlar, Statistika) — optional by design, not part of the core toolbar
- Runtime element
<bo-date-range-pill label="30 Jun - 6 Jul"> from components/date-range-pill.js (verbatim snapshot markup; needs the panel CSS bundle)- Opens
- Date range picker (presets + two month calendars)
Usage
Where this component already lives.
- Hesablar (finance balances)
- pages/finance-balances — full toolbar as captured from production
- Hesabatlar / Hesabat qurucusu
- pages/report-builder — same cluster with the date-range pill to its left