Tab
This is the content displayed when Tab One is active. Fixed tabs have equal width and display all tabs on the screen.
This is the content displayed when Tab Twois active. Fixed tabs are best for when you have a small number of tabs.
This is the content displayed when Tab Three is active. The active tab is indicated by a colored underline.
This is the content for the first scrollable tab. Scrollable tabs are used when there are too many tabs to fit on screen.
This is the content for the second scrollable tab. Users can horizontally scroll to see more tabs.
This is the content for the third scrollable tab. Scrollable tabs don't have a fixed width.
This is the content for the fourth scrollable tab. The active tab indicator moves smoothly between tabs.
This is the content for the fifth scrollable tab. Scrollable tabs are ideal for content that has many categories.
This is the content for the sixth scrollable tab. The tab text is truncated with an ellipsis if it's too long.
This is the content for the Calls tab. Icon tabs use icons to represent the content of each tab.
This is the content for the Favorites tab. Icons help users quickly identify the purpose of each tab.
This is the content for the Profile tab. Icon tabs follow the same Material Design specifications as text tabs.
Tabs organize content across different screens, data sets, and other interactions. They help users quickly move between different views within the same context.
| Property | Value | Notes |
|---|---|---|
| Height | 48px | Standard tab height |
| Minimum width | 90px | For fixed tabs |
| Maximum width | 360px | For fixed tabs |
| Active indicator height | 2px | Primary color underline |
| Typography | Roboto Medium, 14px, 0.5px letter spacing | Material Design's recommended font |
| Active text color | #007bff | Primary color |
| Inactive text color | #555 | 87% opacity black |
| Padding | 12px 16px (fixed) 12px 24px (scrollable) |
Horizontal padding differs between tab types |
| Icon size | 24px | For icon tabs |
| Icon tab label size | 12px | Smaller text for icon tabs |