Tabs
Tabs organize related content into sections within a single page view. Syhrezz uses three tab variants: underline (page-level), pill (filter/card-level), and vertical (settings pages).
Overview
Use tabs to switch between views of the same context — not to navigate to different pages. Tab content switches without page reload. The active tab is always clearly indicated by color and/or underline. Never use tabs with more than 6 items per row.
Underline Tabs
Used at the page level for major content sections (e.g., customer detail page: Overview / Activities / Transactions / Contacts).
Overview
Activities
Transactions
Contacts
Overview content — summary cards and KPIs
Activities content — activity feed
Transactions content — transaction table
Contacts content — contact list
Pill Tabs
Used inside cards for filtering or switching between sub-views. The pill container has a light grey background, and the active tab gets a white card-like elevated appearance.
All
Hot
Warm
Cold
Deal
All prospects — 127 total
Hot prospects — 14
Warm prospects — 28
Cold prospects — 31
Deals — 42
Vertical Tabs
Used on settings pages where left-nav style navigation is appropriate.
General
Notifications
Location & Tracking
Backup
General settings content
Notification settings content
location tracking settings content
Backup settings content
Token Reference
| Variant | Container | Active State | Use For |
|---|---|---|---|
| Underline | .tabs-ul | color:#6366F1, border-bottom:2px solid #6366F1 | Page-level section switching |
| Pill | .tabs-pill | bg:#fff, box-shadow:0 1px 4px rgba(0,0,0,.08), color:#6366F1 | Card-level filter tabs |
| Vertical | .tabs-vert-nav | bg:#EEF2FF, border-left:3px solid #6366F1, color:#6366F1 | Settings page navigation |
AI Implementation Notes
For AI coding assistants: All three tab variants use the same JS switching pattern: toggle
.active on both the tab button and its corresponding panel. Tab panels use display:none by default and display:block when active. Use .tabs-ul for customer/prospect detail pages. Use .tabs-pill for filter controls inside cards. Use .tabs-vert for settings pages. Active color is always #6366F1 across all variants.
When to Use
Use Tabs when
- Switching between related views of the same entity (Overview, Activities, Transactions)
- Filtering data into categories within a card
- Settings page section navigation (vertical tabs)
Don't use Tabs when
- Navigating between different pages — use sidebar links
- More than 6 tabs in a row — consider a select or menu
- Comparing content side by side — show both panels
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | string | required | — | Tab style. 'underline' | 'pill' | 'vertical' |
| activeTab | string | required | — | ID of currently active tab panel. |
| tabs | array | required | — | Array of tab objects: {id, label}. Max 6 for underline/pill variants. |
Behavior
| Trigger | Behavior |
|---|---|
| Tab click | Remove .active from all tabs + panels. Add .active to clicked tab + matching panel. No page reload. |
| Keyboard | Arrow keys cycle through tabs. Enter/Space activates focused tab. Tab key moves to panel content. |
Design Decisions
Why three distinct tab variants?
Each variant serves a different context. Underline tabs work for page-level sections where content area is large — the subtle indicator doesn't compete with content. Pill tabs work inside cards/compact spaces where the background container provides context. Vertical tabs work for settings where a left-nav pattern is more scannable than horizontal tabs.
Changelog
v1.0.0July 2026Added
- 3 variants: underline, pill, vertical
- Active state via .active class on tab + panel
- Keyboard navigation support
States
Overview
Details
Active (underline)
color:#6366F1, 2px bottom border
All
Hot
Active (pill)
bg:#fff with shadow, color:#6366F1
Accessibility
| Requirement | Implementation |
|---|---|
| role="tablist" | Add to tab container element. |
| role="tab" | Add to each tab button. |
| role="tabpanel" | Add to each panel div. |
| aria-selected | true on active tab, false on others. |
| aria-controls | Points to panel ID from tab button. |
| Arrow keys | Left/Right navigate between tabs. Enter/Space activates. |
Composition
Allowed
Page-level sections (detail pages)
Filter categories inside cards (pill tabs)
Settings navigation (vertical tabs)
Forbidden
Tabs for page-to-page navigation — use sidebar
More than 6 tabs without overflow handling
Nested tab lists
Best Practices
Do
Use underline tabs for page-level content, pill tabs for card-level filters.
Each variant communicates different hierarchy levels.
Don't
Mix underline and pill tabs on the same page for similar purposes.
Creates visual inconsistency — choose one per context.
Related Components
Anatomy
1
Tab List
div.tabs-ul or div.tabs-pill. Contains all tab buttons. border-bottom:2px for underline, bg:#F1F5F9+padding for pill.
2
Tab Button
div.tab-ul or div.tab-pill. cursor:pointer, font-weight:600, color:#64748B default. Active: color:#6366F1 + indicator.
3
Active Indicator
Underline tabs: 2px solid #6366F1 border-bottom, -2px offset. Pill tabs: bg:#fff box-shadow elevation.
4
Panel
div.tab-panel. display:none by default. display:block when .active class applied. Contains tab content.
Content Rules
Good tab label
Overview · Activities · Transactions
Noun labels. Concise. 1-2 words each.
Bad tab label
Show all activities here
Tab labels are nouns not instructions. Keep to 1-2 words.