Tabs Appearance Variants
The Tabs block ships with six visual styles — each suited to a different UI context. Beyond the style enum, a rich set of appearance properties controls tab position, width distribution, icon layout, colors, and mobile scrolling behavior. This page is a reference for all visual customisation options and guidance on choosing the right variant.
Overview
All visual properties are in the block's Appearance panel. The core choice is the style enum — select one of the six variants, then fine-tune with the supporting properties below. Style changes are non-destructive: switching variants does not affect tab content or event handlers.
Style Variants
| Variant | Value | Visual Character | When to Use |
| Default | default | Plain text labels; active tab indicated by an underline accent bar | Primary navigation tabs, content-area tabs. The most common choice — clean and neutral. |
| Pills | pills | Rounded pill-shaped tab buttons; active pill filled with accent color | Filter sets, category selectors, secondary navigation. Distinct from primary page nav. |
| Underline | underline | Similar to default; thicker or colored underline accent, no background on inactive tabs | Use when default feels too light — the underline is the main differentiator. Good for dashboards. |
| Card | card | Tabs appear as card tabs raised above or alongside the content panel | Floating panel tabs, detail views, settings pages where the tab and panel are visually connected. |
| Button Group | button-group | Tabs grouped inside a bordered container; each tab is a bordered segment | Inline view toggles (e.g. List / Grid / Map), toolbars. Compact, button-like feel. |
| Segment | segment | Segmented control — a single pill container where the active segment slides as a highlight | Binary or ternary choices (On / Off, Monthly / Yearly, Table / Chart). iOS-style control. |
Position and Layout Properties
| Property | Type | Default | Description |
tabPosition | top | bottom | left | right | top | Where the tab strip renders relative to the content panel. left and right produce a vertical tab strip — useful for settings sidebars or documentation navigation panels. |
tabWidth | auto | equal | full | auto | auto — each tab is as wide as its content. equal — all tabs share the container width equally. full — the tab strip stretches to full width and each tab fills an equal fraction. equal and full work best when tab count is 2–5. |
gap | number (px) | 0 | Space between individual tabs. Increasing gap separates tabs visually; relevant for pills and default variants where tabs do not share a container border. |
tabPadding | string (CSS shorthand) | Theme default | Padding inside each tab label area. Increasing vertical padding makes tabs taller; increasing horizontal padding makes them wider. |
Icon Properties
| Property | Type | Default | Description |
showIcons | boolean | false | When true, the icon assigned to each tab (set per-tab in the Tabs configuration) is displayed alongside the label. |
iconPosition | left | top | right | left | Position of the icon relative to the tab label. top stacks the icon above the label — produces large icon tabs, common in bottom navigation bars. left is the standard inline position. right places the icon after the label, useful for badges or chevrons. |
Color Properties
| Property | Type | Default | Description |
activeTabColor | string (color) | Theme accent | Text color of the active (selected) tab label. Also controls the active pill background in pills and segment variants. |
inactiveTabColor | string (color) | Theme muted text | Text color of inactive tab labels. Increasing contrast relative to activeTabColor makes the active state more obvious. |
indicatorColor | string (color) | Theme accent | Color of the underline bar (for default and underline variants) or the pill highlight (for pills and segment). Separate from activeTabColor so text and indicator can be independently styled. |
Mobile Behavior
When the Tabs block is rendered on a viewport narrower than 768 px, or when the tab count exceeds 4 on any viewport, the tab strip automatically switches to horizontally scrollable mode:
The tab strip becomes a scrollable row — tabs do not wrap.
The active tab is always scrolled into view when switching programmatically.
Touch swipe on the tab strip scrolls the tab list; touch swipe on the content area is not captured by the tab control (it is passed through to the page).
tabWidth: fullandtabWidth: equalare ignored on mobile — each tab reverts toautowidth to allow horizontal scrolling.
Tip: If your design has 5 or more tabs, test on a mobile viewport in preview. Consider using the segment or pills variant — these communicate scrollability more clearly through their visual affordance — or collapse tabs into a dropdown on mobile using a visibility condition tied to the viewport width.
When to Use Each Variant
Variant selection guide — quick reference
// Primary content area navigation (Overview, Settings, Logs) style: default tabPosition: top tabWidth: auto // Dashboard view toggle (Table / Chart / Map) style: button-group tabWidth: equal // Pricing toggle (Monthly / Yearly) style: segment tabWidth: full // Category filter bar (All, Active, Archived, Deleted) style: pills tabWidth: auto gap: 8 // Settings sidebar with vertical tabs style: default tabPosition: left tabWidth: full // Detail panel card tabs (Details, History, Attachments) style: card tabPosition: top
Warning: The segment variant communicates a mutually exclusive, compact choice. With more than 4 segments, it becomes cramped and loses the affordance of immediacy. Switch to pills or default when the option count grows beyond 3–4.
Related
| Page | Relationship |
| Tabs & Stepped Container | Full reference for the Tabs block — tab configuration, events, methods, and the Stepped Container variant. |