Tabs organize content across different screens, data sets, and interactions. Tabs can be used to switch between views of distinct and related groups of information.
|Design source (Figma)
- Tabs can scroll horizontally. A UI can have as many tabs as needed.
- Tabs organize content into categories to help users find different types of information quickly.
- Tabs are displayed next to each other as peers, in categories of equal importance.
There are two types of tab indicators:
- Pill indicator
- Bar indicator
Choose the right type according to emphasis. Pill indicator tabs are recommended for organizing full pages. They display the main content destinations. Bar indicator tabs are used within a content area to further separate related content and establish hierarchy.
- Icon (optional)
- Active indicator
When moving from one tab to the next the content below also slides left or right based on the tab movement.