Tabs & Filters Style Guide

The default selector style for tabs, route navigation, and single- or multi-select filters. Buttons, links, and checkbox-backed labels share one rounded shape and solid theme-color selected state.

Friendly Name

Tabs 01 — Toolbox Tabs

GUID

8a17b3e1-0301-4d24-9a71-000000000301Copy GUID

Use in

Home Toolbox, Tools Library, Evidence Tracker, File Explorer, Community, Member Access, Compact Category Selection

.ta-tabs { display:grid; gap:6px; } .ta-tabs > :is(button,a,.ta-tab-choice), .ta-tab { min-height:44px; border:1px solid #3d3e43; border-radius:5px; background:#1c1d20; } [aria-selected=true], [aria-pressed=true], [aria-current=page], .ta-tab-choice:has(input:checked) { background:var(--theme-accent); color:#fff; box-shadow:3px 4px 0 rgb(from var(--theme-accent) r g b / .42); }

Use the toolbox tabs inside an enclosed card when switching between two to four mutually exclusive panels. Selection remains the solid theme color; the surrounding rail only groups the choices.

Friendly Name

Tabs 02 — Segmented Panel

GUID

8a17b3e1-0302-4d24-9a71-000000000302Copy GUID

Use in

Member Access Methods, Editor Modes, View Modes

.ta-segmented-tabs { gap:4px; padding:4px; border:1px solid #3d3f44; background:#111214; }

Use for optional compact filters that can be combined. Chips wrap, use aria-pressed, and fill with the solid theme color when selected.

Friendly Name

Filter 01 — Toggle Chips

GUID

8a17b3e1-0303-4d24-9a71-000000000303Copy GUID

Use in

Search Filters, Tags, Optional Scopes

.ta-chip { min-height:34px; border:1px solid #484b51; border-radius:999px; background:#1b1c1f; } .ta-chip[aria-pressed=true] { border-color:var(--theme-accent); background:var(--theme-accent); color:#fff; }

Previous and next stay at the outer edges while the current page remains centered.

Friendly Name

Paging 01 — Results Navigation

GUID

8a17b3e1-0304-4d24-9a71-000000000304Copy GUID

Use in

Content Library and Long Result Sets

.ta-pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }

Use for a short, ordered process. Current, complete, and upcoming states must remain distinct.

Friendly Name

Steps 01 — Workflow Progress

GUID

8a17b3e1-0305-4d24-9a71-000000000305Copy GUID

Use in

FOIA, Email Outreach, Import and Setup Workflows

.ta-stepper { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); border:1px solid #3b3d42; }