Tabs

Tabs are used to switch between different views of content within a given view in George.
A typical example is to use Tabs to toggle a view between two different states of group of elements, like showing either Open or Completed Orders.

System Tabs

This is the default variant of Tabs that are to be used in George.

iOS iOS

The native platform component “Segmented Control” is the preferred way of showing a tabbed view on iOS.

Android Android

A custom tab implementation is the preferred way of showing a tabbed view on Android.

Rules For Android

Use Composable Tabs
Use a PagerState to synchronize state between Tabs and HorizontalPager or other Pager implementations.

Custom Tabs

This special variant is currently only used within Products and is the main element to navigate between different sections of a Product’s features & content.

The styling is aligned across Android & iOS to guarantee a unified design:

The technical difference to System Tabs is that Custom Tabs can exceed the device content width and overflowing tab items can be accessed by horizontally scrolling the Tab row:

Rules For Android

System tabs and custom tabs are the same on Android.

Tokens

Element	Token
label	`color.state.info`
base	`color.surface.primary`