...

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.

...

Types

Type	Usage	Image
Main tabs	Use it as tabbed navigation - Single row above their associated content
2nd level tabs	Single row above their associated content. Appear only as a second level to main tabs hierarchy
Details pane tabs	Single row above their associated content. Appear only in the details pane
Ribbon tabs	Use it as tabbed navigation in the ribbon only		Side tabs <TBD>

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

• There's always one tab selected at a time

Structure Elements

• ContainerTab item

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

• 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.

  Tab item

  Describes

Content

• The label 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.

Default

By default, show the left tab is the first tab show as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

• Later on, you can show the tab last selected by the user.

States

State	Image	Comment
Regular
Hover
Active
Selected
Other Not selected focused
Other Not selected focused hover
Other Not selected focused active
Selected focused

...

• You can click on the entire label

• Tabs can be switched by clicking on a different tabThere's always one tab open

• Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab

• Hovering over a tab When the label is truncated, hovering over it will show a tooltip with the full ?????????????? name of the section headerlabel

Validations and errors

State	ImageComment	full image
Tab item error		Image Added
Tab item warning		Image Added

Best practices

• 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 displayedsix tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.

• In the details pane, a maximum of four tabs is recommended.

• Use clear and short labels

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

...