Usage guidelines
- To break up a large collection of information or pages into logical, digestible views.
- To switch between different, yet related views, such as Updates and Messages.
- Any UI elements above the Tabs are altered upon selection. Use Link instead.
- To break up chunks of information that aren't related to each other or aren't on the same hierarchical level.
- To filter information. Consider SegmentedControl instead.
Best practices
- Place Tabs directly above the relevant information.
- Avoid using more than six Tabs. Consider using a different component like Sheet.
- Order Tabs by relevance—the first tab should be the most logical starting view.
Keep Tab labels short and concise, one or two words.
Hide or disable Tabs if that Tab is empty. Additionally, there should always be at least two tabs.
Allow tabs to scroll horizontally.
Truncate tabs to fit within a view.
Accessibility
People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:
Accessible design on iOS
Accessible development on iOS
Design tokens
Anatomy
Default tabs
Filled tabs
Variants
Alignment
Tabs can be aligned to either the start or end point depending on language direction or centered.
- Start or end aligned (Default)
Use if you have more than three tabs. Start or end-aligned tabs will scroll horizontally if information is long enough to flow out of the frame. - Center aligned
This variant may be used if you have two or three tabs. Center-aligned Tabs shouldn't be used if labels are long or if you have more than three Tabs. The center-aligned style of Tabs is used primarily for navigational Tabs and sits in the header of the screen.
Start or end aligned (Default)
Center aligned
Style
Tabs can be aligned to either the start or end point depending on language direction or centered.
- Underline
The underline style of Tabs sits primarily in the header of the screen. - Filled (Default)
This is the default tab style. Use the filled style for any Tabs that sit within a screen.
Default tabs
Filled tabs
Localization
Be sure to localize the tab text. Note that localization can lengthen text by 20 to 30%.
