Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSingle SelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailDockEmailPage TemplateRelated Items
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
ListLists vs TablesTile
DST Resources
ContributeDevelopmentFigma LibrariesSpotlightUser TestingFeedback

Tabs

We use tabs to navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.
Demo and Developer GuidelinesFigma Component

Anatomy

Tab Name

Tab names are 1-3 nouns that concisely describe the subject of the content they link to. They are title case without punctuation.

Character count limit: 30
Default list page tabs in their respective order
Default detail page tabs in their respective order
Page tabs overflow menu open with selected option.

Types

Tab States

Overflow Tab States

When tabs take up too much room (internationalization, browser window resizes, etc.) the tabs that cannot fit are rolled up into a dropdown menu. The selected tab is indicated in this menu with an orange underline and the selected menu item is blue.

Specifications

Styling