...

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual-screen support, and workspace customization.

...

Usage & Behavior

Tabs organize and allow navigation between groups of content that are related and at the same level of the hierarchy.

General guidelines

Structure

The horizontal layout of the tab bar never changes. The tabs always appear side by side

Structure Elements

• Container

  • Display a navigation text element arranged together with the active inactive highlighted

• Tab item

  • Describes its content and sets user expectations

  • Each tab label describes the content contained within it

  • one to two words maximum

  • Icons are not permitted as tab labels

• Active tab

  • To differentiate an active tab from an inactive tab, apply a 3 px underline and color change to the active tab’s highlighted.

...

• Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in the tab label

• A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.

• Use clear labels

• Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

...

Accessibility compliance

Each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3

...