Tabs

Tabs allow users to switch between related views while remaining in the context of a page. To learn more, see Tabs.

Tab labels should be concise, scannable, and clearly describe the contents of the tab to the user. Try to keep tab labels to 1-2 words.

Use nouns to label tabs, instead of verbs. If needed, you can add adjectives (descriptive words) to your noun labels to better describe the content in the tab.

Why? The tab label describes what’s housed inside the tab, instead of the action the user is performing. We generally use verbs to inform the user what will happen when they perform an action, like click a button. For a tab, the act of clicking the tab isn’t really the focus—the content housed in the tab is what’s important, and using a noun (and sometimes adjectives) to describe it allows a user to focus on that.

Note: The slashes (/) are used here to indicate multiple tabs at the same level. We don’t use slashes in the UI.

Where applicable, pair tab labels with corresponding page or section titles. The page or section title should be a noun that corresponds to the descriptive tab label. The corresponding tab label can be another noun, or a noun plus an adjective.

See also: Segmented Controls (UI Text), Segmented Control (Component)