The header control atoms (the .sb-msel family) compose into every feature header — see the Feature Header Inventory for where each one lives. This page is the single source of truth for their states and behavior: what each looks like and what happens when you click it. The demos below are live and interactive — click them.
How the interactivity works. None of these demos carry bespoke JavaScript. All behavior comes from the shared sb-controls.js (included like sb-tooltip.js), which wires controls by a data-role convention on load: data-role="single" + a shared data-group = a one-of-N radio set (optionally mirrored by a [data-readout="group"]); data-role="toggle" = independent on/off; data-role="two-state" = a stateful flip driven by data-a-icon/-label and data-b-icon/-label. A feature screen opts in by adding those attributes and the script include — nothing per-screen.
1 · Base .sb-msel states
Default
Hover
Selected (.on)
Pressed
Disabled
Static reference. Quick-filter buttons are gray-06 by default → gray-06 hover tint → blue fill + blue-01 text + blue-01 border when .on (selected). Pressed mirrors the transient press; disabled drops to gray-07/gray-05 and is non-interactive.
2 · Single-select quick-filter group — assignment
active: All
one-of-N — clicking one selects it and clears its siblings, so there is always exactly one active assignment filter (a segmented radio).
3 · Two-state toggle — Tasks All ↔ Overdue
state: All
A single stateful pill that flips between two filters on each click: state A = fa-list + "All" (neutral), state B = fa-triangle-exclamation + "Overdue" (standard blue selection). Not a momentary switch — it holds the state.
4 · Smart-view + count toggle — Untouched
An on/off smart view with a live count: icon-only fa-triangle-exclamation + a red .sb-marker--notifications count badge. Off = default; on = selected (.on). Red badge = needs attention.
5 · Density / Compact toggle
on/off — switches the board between full and compact cards. Icon-only (grip-lines); .on when compact.
6 · Multi-select chips — Lead Source (Filters panel)
many-of-N — each chip toggles independently, so any number can be on at once. Selected chips carry a trailing ✕. These live in the Filters panel, not the header row.