Tabs
Last Updated on Sep 29, 2022
Tabs are used to navigate between related content on the page.
Design Principles
- Use tabs to switch between content that is mutually exclusive. Only one tab can be selected at a time.
- Tabs should not be used to filter or show different contexts of a data set. Use a Context Switcher instead.
- In most cases, tabs will be used
- Tabs should be aligned to the top, left (or right with RTL languages) of the page or container.
- Tab labels should be very concise. Try to use no more than 2 words. Optionally, tabs can have icons. Every tab should have an icon, not just one tab. Chips are also available.
- Use icons only when they add essential value to the label. Do not use for decoration.
- Do not mix different variants of tabs, e.g. using with & without icons in the same tab group.
- On mobile designs, tabs should not be used. Use a Context Switcher instead. They emulate tabs in iOS. They should be used instead of the tabs component on mobile because they look more like the conventions for mobile tabs.
- If tabs exceed one row, use a horizontal scroll bar below the tabs to view all options.
Related Components