Tabs

Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

The tab component has been updated to reflect the new foundational styles and now incorporates additional accessibility considerations. The design, behavior, and usage guidelines for the overflow state are also new.

Anatomy

Contained

Contained tabs are links with a white background container indicating the current tab. They include a current tab indicator at the top of the tab.

  1. Selected tab: includes a Blue 600 tab indicator, a white background, and the tab label.
  2. Rest tab: unselected container with transparent background and tab label.

Inline

Inline tabs are links without the white container for the tab label, and include a selected state indicator at the bottom of the selected tab label.

  1. Selected tab: includes a Blue 600 tab indicator at the bottom of the tab and label.
  2. Rest tab: unselected tab with label.

Responsive stacked view

For XS to S (extra-small to small) grids for mobile screens, tabs display as a vertical list. The selected tab content fills the screen and presents a back option to return to the tab list. In the UI kit, the “first state” displays a top divider.

  1. First state tab: includes a Gray 300 divider above the first tab.
  2. Tab label: a concise title representing the tab’s content.
  3. Selected tab: slides open a panel with a linked tab label and a back arrow.

Articles

Tabs, used right

Read the Nielsen Norman Group's article on tabs.

Timing guidelines

Read the Nielsen Norman Group's article on tabs' timing.