...

• Use clear and short labels.

• Do not use icons for tab labels.

• Keep in mind reduced mobile widths and space for translated labels - the character length of a label will impact the experience.

• A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.

• In the Details panelPanel, a maximum of four tabs is recommended.

• Tabs should be ordered by importance, popularity or user’s workflow. The order should be consistent across the experience.

• Tabs with related content should be grouped adjacent to each other.

...

Zeplin link	Screen thumbnail
Main Tabs https://zpl.io/bPkL1ma
2nd Level Tabs https://zpl.io/2ZqjW0X
Details Pane Tabs https://zpl.io/VODWzzr
Ribbon Tabs - Expand https://zpl.io/bJvqAmE

Code

...

...