Skip to main content


Tabs are used to quickly navigate between views within the same context.

Designers should use Segmented Controls when available due to usability issues with tabs. If that is not feasible, please follow the specifications below.

Tabs Example


Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly horizontally, at the top edge. When a tabbed interface is initialized, one tab panel is always displayed.


Use when

  • You want to quickly switch between sibling views underneath a larger organizing principle/context.
  • You want to organize content into meaningful sections that occupy less screen space.
  • Add visual consistency.

Don’t use when

  • You need primary means of navigation. Use Bottom Navbar instead.
  • Grouping unrelated content.
  • You want to organize content that needs to be seen by the user at the same time.
  • You want to hide primary user action element.
  • You want to hide critical content.
What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati