The Tabs block's Appearance panel controls how the tab strip looks: the tab style, its orientation, how tab labels are sized and laid out, and the colors of the active and inactive tabs. This page is a reference for those options.
Overview
All visual properties are in the block's Appearance panel. The core choice is Tab Variant. Then fine-tune labels with the tab label, Active Tab and Inactive Tab settings. Changing the variant doesn't affect tab content or event handlers.
Tab Variant
The variants you can pick depend on the app type. Tab Variant isn't shown when Orientation is Vertical.
Variant | Available in | Visual character |
|---|---|---|
Stroke (default) | Web and mobile apps | Plain labels with a line under the selected tab. |
Pill | Web and mobile apps | Capsule-shaped tabs. On web, each tab can also have its own Icon Color. |
Segment | Mobile apps only | Labels in a grey track, the selected one on a white chip. |
None | Mobile apps only | No tab bar — only the content of the selected tab shows. |
Layout Properties
Property | Options | Description |
|---|---|---|
Orientation | Horizontal (default), Vertical | Horizontal places the tab strip above the content. Vertical gives a vertical tab strip, useful for settings sidebars. |
Scrollable | On (default), Off | Mobile apps only, horizontal tabs only. On: tabs keep their natural width and the bar scrolls. Off: tabs shrink to share the row. |
Layout | Hug, Fill, Start, Center, End | How tab labels are distributed along the strip. Hug sizes each tab to its label; Fill stretches tabs to fill the strip; Start, Center and End align the tabs. |
Size, Weight | Theme text sizes and weights | The text size and weight of the tab labels. |
Icons
Icons are set per tab, not in the Appearance panel. Open a tab from Content → Tabs and set its Start Icon. With the Pill variant on web, you can also set the tab's Icon Color. For mapped tabs, use the Start Icon and Start Icon Options mappings. See Tabs & Stepped Container for the full per-tab settings.
Active Tab and Inactive Tab
Group | Properties | Description |
|---|---|---|
Active Tab | Color, Size, Weight | Text styling of the selected tab. |
Inactive Tab | Color, Size, Weight | Text styling of the tabs that aren't selected. More contrast with the active tab makes the selection easier to see. |
Size and Weight set here take priority over the top-level Size and Weight under Layout Properties. The top-level values apply to any tab state where you leave them empty.
Visibility and Styles
Visibility — show or hide the whole block with conditions.
Styles — set in the Layout and Background sections: width (min/max), height (min/max), flex layout, padding, gap, overflow, rotation and background color.
Custom CSS and HTML Attributes — add them from the block's actions menu (Custom CSS or HTML Attributes). Their sections then appear at the end of the Appearance panel.
Mobile Behavior
The horizontal tab strip scrolls rather than wrapping — tabs never move to a second row.
In mobile apps, the Scrollable toggle controls whether tabs keep their width and scroll, or share the row.
In mobile apps, the active tab is kept in view.
When to Use Each Variant
Stroke — primary content navigation (Overview, Settings, Logs). The most common choice.
Pill — filter sets and category selectors that should look distinct from page navigation.
Segment (mobile) — a compact choice between a few options, such as Monthly / Yearly.
None (mobile) — switch content without showing a tab bar, for example when a Stepper or buttons drive the Change Tab method.
Vertical orientation — settings sidebars or long lists of sections.
Tip: With Segment, keep to a few options. With more than 3–4, switch to Stroke or Pill.
Related
Page | Relationship |
|---|---|
Full reference for the Tabs block — tab configuration, events, methods, and the Stepped Container block. |