---
url: /components/tabs/overview.md
description: >-
  Tabs organize content across different screens, data sets, and other
  interactions.
---

# Tabs

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

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Tabs](/assets/2b3549ca-mrol7c2h-tabs.DO8yz0zJ.webp)

* Use tabs to group content into helpful categories
* Two variants: primary and secondary
* Tabs can horizontally scroll, so a UI can have as many tabs as needed
* Place tabs next to each other as peers

![A bar of primary tabs with destinations labeled Flights, Trips, and Explore. And a bar of secondary tabs with destinations labeled Overview and Specifications](/assets/f90817ab-m2kfqg9k-1.C-MiFgaC.webp)

1. Primary tabs
2. Secondary tabs

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/TabBar-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/tabs) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/Tabs.md) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/tabs.md) | Available |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Layout: Icons and labels are now vertically centered within the container

![Bar of primary tabs with destinations labeled Flights, Trips, and Explore](/assets/61b678a8-m2k3okei-2.B5d61e5X.webp)

Tab icons and labels are positioned in the vertical center of the container