Tabs Container

Add a tabbed navigation bar to your screen so users can switch between different views or sections. Supports 2 to 6 tabs with multiple visual styles, optional icons, notification badges, and smooth transitions. Great for organizing content on a single screen without navigating away.

Getting Started

Add the Tabs Container component to your screen. By default, it shows 3 tabs with an underline style. Each tab has a customizable label, optional icon, and optional badge. Use the On Tab Changed action to control what happens when users switch tabs -- for example, showing or hiding different sections of your screen.

Settings

Tab Count

Choose how many tabs to display: 2, 3 (default), 4, 5, or 6.

Default Active Tab

Set which tab is selected when the screen first loads. Choose None (no tab selected initially) or Tab 1 through Tab 6. Default is Tab 1.

On Tab Changed

An action that fires whenever a user switches tabs. Passes two values:

• Tab Index -- The number of the newly selected tab (1, 2, 3, etc.)

• Tab Label -- The text label of the selected tab

Use this to filter lists, show/hide content, or track which tab is active.

Form Values

The component outputs two form values you can use elsewhere:

• Selected Tab Label -- The text label of the currently active tab

• Selected Tab Index -- The number of the currently active tab

Tab Bar Appearance

Tab Style

Choose the visual style for your tabs:

• Text Only -- Just text, no visual indicator for the active tab

• Underline (default) -- A colored line under the active tab

• Pill -- A rounded pill-shaped background on the active tab

• Filled -- A solid background fill on the active tab

Underline Options (Underline Style)

• Underline Width -- Full Width (spans the entire tab) or Partial (60%) (default, a shorter accent line)

• Underline Position -- Top or Bottom (default)

• Underline Thickness -- Line thickness from 1 to 6 pixels (default is 3)

Pill Options (Pill Style)

• Show Border -- Add a border to tabs: None (default), Inactive Tabs (only unselected tabs get a border), or All Tabs

• Tab Spacing -- Gap between pill tabs (0 to 16, default is 4)

• Border Radius -- Rounding of the pill shape (0 to 24, default is 8)

General Appearance

• Animate Transition -- Smooth animation when switching tabs (default: on)

• Scale Active Tab -- Slightly enlarge the active tab for emphasis (default: off). Available for Text Only, Pill, and Filled styles.

• Show Divider -- Display a thin line at the bottom of the tab bar (default: on)

• Tab Size -- Choose Same Size (default, all tabs are equal width) or Dynamic Width (tabs size to fit their content)

• Horizontal Padding -- Left/right padding inside each tab (4 to 40, default is 16). Only applies to Dynamic Width.

• Tab Vertical Padding -- Top/bottom padding inside each tab (0 to 24, default is 8)

• Tab Bar Vertical Padding -- Padding above and below the entire tab row (0 to 24, default is 8)

• Tab Alignment -- Align dynamic-width tabs to the Left (default), Center, or Right

• Container Rounding -- Corner radius of the entire tab bar container (0 to 24, default is 0)

Individual Tab Settings (Tab 1 through Tab 6)

Each tab has its own settings section:

Label

The text displayed on the tab. Supports font styling (family, size, weight). Default labels are "Tab 1", "Tab 2", etc.

Icon

• Show Icon -- Toggle an icon on this tab (default: off)

• Icon -- Choose from the icon picker. Default icons vary by tab (home, search, settings, person, star, info).

• Icon Position -- Place the icon to the Left of Text (default) or Right of Text

Badge

Add a notification badge to draw attention to a tab:

• Enable Badge -- Toggle the badge indicator on or off (default: off)

• Badge Value -- A number field (use Magic Text to bind to your data). The badge appears when the value is greater than 0. Numbers above 99 display as "99+."

• Show Badge Value -- Toggle whether the number is visible on the badge. When off, the badge appears as a simple dot.

Disabled

Toggle a tab to its disabled state. Disabled tabs appear greyed out and cannot be tapped.

Tab Click Action

An action that fires when this specific tab is tapped. Use this for tab-specific behavior in addition to (or instead of) the On Tab Changed action.

Colors

Customize all the colors in the tab bar:

• Tab Bar Background -- Background of the entire tab bar (default: #F5F5F5)

• Active Tab Color -- Background/fill color of the active tab (default: #E0E0E0)

• Active Text and Icon Color -- Color of text and icons on the active tab (uses your primary color by default)

• Inactive Text and Icon Color -- Color of text and icons on unselected tabs (default: #999999)

• Underline Color -- Color of the underline indicator (uses your primary color by default)

• Divider Color -- Color of the divider line below the tab bar (default: #E0E0E0)

• Badge Color -- Background color of notification badges (default: #FF3B30, red)

• Badge Text Color -- Text color inside badges (default: white)

• Disabled Text Color -- Color of disabled tab text and icons (default: #CCCCCC)

Actions

• On Tab Changed -- Fires when the active tab changes. Passes the Tab Index and Tab Label. Use this to show/hide screen sections or filter content.

• Tab 1-6 Click Action -- Individual actions for each tab. Fire when that specific tab is tapped.

Tips & Best Practices

• Use the On Tab Changed action to control visibility of other components on the screen. Set up conditional visibility rules based on the Selected Tab Index form value.

• Keep tab labels short -- one or two words max. Long labels get truncated or cause layout issues, especially with 5-6 tabs.

• Use badges sparingly. They're powerful attention-grabbers, but too many badges create visual noise. Reserve them for genuinely actionable counts (unread messages, pending tasks).

• Choose Underline style for a clean, modern look. Use Pill or Filled style when you want more visual separation between tabs.

• Set Dynamic Width when tab labels vary significantly in length (e.g., "Home" vs. "Notifications"). Use Same Size when all labels are similar length for a balanced layout.

Example Use Cases

• Profile Screen: Tabs for "Posts", "Followers", "Following". Use On Tab Changed to filter the list below to show the selected category.

• Dashboard: Tabs for "Overview", "Analytics", "Settings". Each tab shows a different section of dashboard content.

• E-Commerce Product Page: Tabs for "Description", "Reviews", "Specs". Use badges on the Reviews tab to show the number of new reviews.

• Messaging App: Tabs for "All", "Unread", "Archived". Use a badge on the Unread tab with the count of unread messages.