import { Tabs } from '@uhg-abyss/mobile';

alt

disableSwipe

disableTransition

tabBarColor

<Tabs heading="Tabs Sandbox">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$semantic.spacing.xl' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>

Heading

The heading property provides a label that describes the purpose of the set of tabs. This is a required property as it gives screen reader users important context.

<Tabs heading="Tab Group Heading">
  <Tabs.Tab label="Tab - 1">
    <Text>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 2">
    <Text>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 3">
    <Text>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>

Initial Tab

Use the initialTab property to set the tab that is active at build time. The default is set to the first tab in the sequence. The active state will be handled internally by the component. To directly control the active state see the next section.

Alt Variant

Use the alt prop to apply the alternative styling to the Tabs component.

Programmatic Navigation

Ref functions control of the Tabs active state.

• goToTab(index: number): Navigate to a specific tab (1-based).
• goToPrevTab(): Navigate to the previous tab.
• goToNextTab(): Navigate to the next tab.
• activeTab: The current active tab (1-based).

The initialTab property can still be used to set the initial tab at build time.

Create a ref and optionally attach the provided type TabsRef to the ref for type safety. Pass the ref to the Tabs component, then call the functions on the ref for navigation.

Disable Swipe

Use the disableSwipe prop to disable swiping from one tab to another.

Disable Transition

Use the disableTransition prop to disable animating from one tab to another on either a swipe or a tab button press.

Scrollable Tabs and Menu

If there are more than three tabs, the Tabs component will scroll horizontally. If there are fewer than four tabs and the tabs fit on the screen horizontally, the scroll does not apply. If the tabs do not fit, a horizontal scroll is activated. Ideally, there should be no more than eight tabs.

The Tab menu opens up a bottom sheet with a list of the tabs. When there are fewer than four tabs, there is not a Tab menu.

Tab Bar Color

Use the tabBarColor prop to change the color of the tab bar.

Tabs Props

Prop Name	Type	Default	Description
alt	boolean	-	Flag to apply alt variant to the Tabs component
children	node	-	The contents of the tabs component
disableSwipe	boolean	false	Flag to disable tab scrolling
disableTransition	boolean	false	Flag to disable tab transitions
heading	string	-	The name for the tabs. Used to set the accessibility label tag and bottom sheet heading
initialTab	number	-	Used to indicate initial tab
tabBarColor	string	-	Color of the tab background

Tabs.Tab Props

Prop Name	Type	Default	Description
children	node	-	The contents of the tab
label	string	-	The label of the tab

Tabs Classes

Extends Abyss - BottomSheet Classes

Class Name	Description
abyss-tabs-bottom-sheet	Bottom sheet menu element
abyss-tabs-bottom-sheet-active-line	Tabs bottom sheet active line
abyss-tabs-bottom-sheet-container	Tabs bottom sheet list container
abyss-tabs-bottom-sheet-list-item	Tab bottom sheet item
abyss-tabs-bottom-sheet-list-item-label	Tabs bottom sheet item label
abyss-tabs-menu-button	Tabs menu button
abyss-tabs-menu-icon	Tabs menu button icon
abyss-tabs-root	Tabs root element
abyss-tabs-screen-wrapper	Tabs screen wrapper
abyss-tabs-tab-bar	Tab bar at the top of the component
abyss-tabs-tab-button	Tab button
abyss-tabs-tab-button-active-label	Tab button active label
abyss-tabs-tab-button-inactive-label	Tab button inactive label
abyss-tabs-tab-indicator	Tab scroll indicator

Tabs.Tab Classes

Class Name	Description
abyss-tabs-tab-root	Tab root element

Tabs Translations

Translation Key	Value
Tabs.openMenu	Open tab menu
Tabs.selected	selected

Dynamic Type

Text and Icons on Tabs scale to 3XL.

Search tokens

Tabs Tokens

Token Name	Value
tabs.color.surface.container.regular	#FFFFFF
tabs.color.surface.container.alt	#002677
tabs.color.icon.one-tap-alt.regular	#196ECF
tabs.color.icon.one-tap-alt.alt	#FFFFFF
tabs-tab-item.color.surface.container.regular.active	#F3F3F3
tabs-tab-item.color.surface.container.regular.rest	#FFFFFF
tabs-tab-item.color.surface.container.alt.active	#00184D
tabs-tab-item.color.surface.container.alt.rest	#002677
tabs-tab-item.color.text.label.regular	#323334
tabs-tab-item.color.text.label.alt	#FFFFFF
tabs-tab-item.color.border.indicator.regular	#4B4D4F
tabs-tab-item.color.border.indicator.alt	#FFFFFF
tabs-menu-item.color.surface.indicator	#002677
tabs-menu-item.color.text.label	#323334
tabs-menu-item.color.icon.utility.rest	#4B4D4F
tabs-menu-item.color.icon.utility.active	#323334
tabs-tab-item.border-width.bottom.container	3
tabs.sizing.all.icon.one-tap-alt	24
tabs-menu-item.sizing.all.icon.utility	20
tabs-menu-item.sizing.width.indicator	3
tabs-menu-item.sizing.height.min.container	40
tabs-menu-item.sizing.height.indicator	24
tabs.spacing.padding.horizontal.one-tap-alt-container	16
tabs-tab-item.spacing.padding.horizontal.container	16
tabs-tab-item.spacing.padding.vertical.container	12
tabs-menu-item.spacing.padding.horizontal.container	16
tabs-menu-item.spacing.padding.vertical.container	8
tabs-menu-item.spacing.gap.horizontal.container	4

Tabs Props

V2	V1	Status
-	activeTab	Removed
alt	colorScheme	Renamed
children	children	Unchanged
disableSwipe	disableSwipe	Unchanged
disableTransition	disableTransition	Unchanged
heading	title	Renamed
initialTab	initialTab	Unchanged
-	onChange	Removed
tabBarColor	tabBarColor	Unchanged