Tabs
Tabbed navigation with two visual styles. Both use an underline indicator for the
active tab. The tab_type field switches between a plain style and a
style that adds a counter badge pill to each tab label.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-primary | global_colors.primary_color | Active tab text, active underline border-bottom, active counter pill background, hover text and hover pill background |
--color-heading | global_colors.heading_color | Inactive tab link text |
--color-border | global_colors.border_color | Full-width bottom rule, inactive counter pill background |
Type 1 — Plain underline
Simple tab bar with a bottom underline on the active item. No counts. Use when navigating sections where the quantity of items in each section is not relevant to how the user chooses which tab to open.
Type 2 — With counter pills
Same underline nav as Type 1, but each tab label includes a badge pill showing a numeric count. Use when the number of items per section helps users decide where to navigate first — for example, pending approvals, unread assignments, or open tasks per category.