...
Tab items, shown using short text labels.
Divider line between beneath the tabs, above the content.
Active tab. To differentiate the active tab from inactive tabs, apply a 3 px colored underline. (Designs for tabs in the Details Panel and Ribbon are differentdiffer).
The horizontal layout of tabs never changes.
...
The label describes the content contained within each tab, and sets user expectations
They should be short, : one to or two words maximum.
Icons are not permitted as tab labels.
...
Only one tab can be selected at a time.
A tab can be selected by clicking on the entire label. This
Selecting a tab will change it to active and show the tab’s the view below to the new tab’s associated content.
Clicking on a new tab will automatically remove the selection from the previously-active selected tab.
When the tab label is truncated, hovering over it will show a Tooltip with the full label.
Validations and errors
Tab item error |  |  |
Tab item warning |  |  |
Best practices
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. Do not use icons for tab labels.
A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.
In the Details panel, a maximum of four tabs is recommended.
Tab order should be consistent across an experience.
Tabs with related content should be grouped adjacent to each other.
...