# Component

Tabs should be used to switch between information within a similar context. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Content should be logically chunked behind the tabs so users can easily predict what they'll find when they select a given tab. An example of this is on the Product Listing Page. Shop and Discover are seperated with tabs with short, descriptive titles.

Tabs states

# Rules

Do

  • Use tabs to alternate between views within the same context
  • Use short labels (1-2 words)
  • Use plain, easy to understand wording
  • Prominently highlight the currently selected tab
  • Place the row of tabs on top of the tab panel
  • Have clearly visible and readable unselected tabs
  • Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation.
  • Connect the current tab to the content area.
  • Make all tabs behave in the same way

Don't

  • Don't use tabs to navigate to different areas
  • Don't write tab labels in all caps
  • Don't wrap tabs over multiple lines - consider using an overflow menu instead
  • Don't place tabs on the side of the tab panel or at the bottom

# Structure

Tab structure

# Specifications

Min height Padding(x) Padding(y)
56pt 16pt 16pt

# Typography

Type Font size Line height Font weight
Active 16pt 24pt Bold
Inactive 16pt 24pt Book
Last Updated: 10/6/2020, 8:34:39 AM