Tabs organize content across different screens, data sets, and other interactions.

Primary tabs

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations.

With icons

Flights tab

Without icons

Flights tab

Only icons

Flights tab

Secondary tabs

Secondary tabs are used within a content area to further separate related content and establish hierarchy.

With text

New-York, often called New York City or NYC, is the most populous city in the United States. With a 2020 population of 8,804,190 distributed over 300.46 ...


Component props

TabsPrimaryidString or NumberSpecify tab ID
TabsPrimaryiconNodeSpecify tab icon
TabsPrimaryheaderStringSpecify a tab header
TabsPrimarycontentNodeSpecify tab content
TabsSecondaryidString or NumberSpecify tab ID
TabsSecondaryheaderStringSpecify a tab header
TabsSecondarycontentNodeSpecify tab content