How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogTab bar
Tab bar is a navigation component. Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Tab bar has 2 to 6 tabs. It supports design tokens and any color tokens. Editing is enabled.
Behaviour
Tab bar contains up to 6 tabs.
Money balance should be shortened: "1K, 1M," etc. Be sure to specify the currency sign.
The tab bar can also contain a counter.
The component size depends on the layout.
When adding an icon to the tab bar, remember that the icon must have a pair: filled and outlined.
Specs
Recommended max text length in a tab is 8 characters. If the text is longer, the end is hidden with "..."
The characters restriction applies to layout only. There is no limit on the characters in the component itself.
6 tabs
5 tabs
4 tabs
3 tabs
2 tabs
/w=3840,quality=90,fit=scale-down)
On this page
