Description

Tabs enable content organization at a high level. They allow the user to switch between views, data sets, or functional options.

...

• The label describes the content contained within each tab, and sets user expectations.

• They should be short: one or two words maximum.

• Icons are not permitted as tab labels.

States

	Main Tabs	2nd Level	Details Pane Tabs	Ribbon Tabs	Ribbon Tabs - Collapsed
Regular		Image Added	Image Added	Image Added	Image Added
Hover		Image Added	Image Added	Image Added	Image Added
Active		Image Added	Image Added	Image Added	Image Added
Selected		Image Added	Image Added	Image Added	Expands the Ribbon
Focused, Regular		Image Added	Image Added	Image Added	Image Added
Focused, Hover		Image Added	Image Added	Image Added	Image Added
Focused, Active		Image Added	Image Added	Image Added	Image Added
Focused, Selected		Image Added	Image Added	Image Added	Expands the Ribbon

Interaction

• Only one tab can be selected at a time.

• A tab can be selected by clicking it.

• Selecting a tab will change the view below to the new tab’s associated content.

• Clicking on a new tab will automatically remove the selection from the previously-selected tab.

• When the tab label is truncated, hovering over it will show a Tooltip with the full label.

...