Tabs
Underlined tab bar with optional count pills, plus a mobile rich-trigger dropdown. Renders both from a single TabNavModel. Underneath, count pills use <span koala-tab-pill> — the auto-formatted number badge (12 → 12, 1500 → 1.5k, 2_000_000 → 2m).
Canonical (helper)
Resize the window — below the sm breakpoint the bar collapses to a
rich dropdown trigger; above it, the inline bar. Active tab gets aria-current="page";
mobile dropdown's open-state has aria-expanded wired.
Raw markup (what the helper renders)
For most pages you should use <koala-tabs model=…>; this
section is a visual reference for what the helper emits.
Workspace tabs (chips)
Record detail pages (view transaction / quote) and the mega-search facets share one chip row
(.ws-chips / .ws-chip) so
tabs read identically across the portal. Detail tabs are built from
_WorkspaceTabBar — a WorkspaceTab
per chip (icon + label + optional count). The active chip carries .is-active;
switchTab toggles it client-side alongside aria-current.
The underlined <koala-tabs> below remains for settings / standalone pages.
Variants
3 variantsStates
4 statesProps
3 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-tab-pill | bool (on a <span>) |
Marks the span as a count pill. Inner number is auto-formatted to k / m for large counts. |
| class="tab-link" | — | Wraps every tab anchor. Adds the underline-on-hover and active-state animation (CSS in app.css). |
| aria-current | "page" | Set on the active tab. Drives the persistent underline + bold text. |