Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Tabs

Tabs allow the user to quickly navigate between 2 to 4 views on the same screen. Each tab contains separate information related to the same topic. Use this component only when the tab content is not readable when displayed all at once.

Variants

Tab bars can carry between 2 to 4 tabs that may either be centered horizontally on the bar or left-aligned. Mobile environments that allow for the proper display of the entire tab bar without horizontal scrolling can adopt the tab treatment. Otherwise, tabs should convert to accordions when there are space constraints. Tab labels are text-only and will not overflow onto two lines, regardless of screen size.

Tab label 1
Tab label 2

This is the content for Tab 1.

This is the content for Tab 2.

Tabs
The tab component consists of a container, a tab bar, text labels, and the tab content. In addition to the default state, the tab bar also has a hover state and a focus state. The selected and unselected states mark the active and inactive tabs, respectively.

Microcopy

Keep text labels on a single line and of similar length by removing unnecessary words. All tabs should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation.