Tabs organize content across different screens, data sets, and interactions. Tabs can be used to switch between views of distinct and related groups of information.

Tabs cover


Type Link Status
Design Design source (Figma) Available
Implementation Jetpack Compose Available


  • Tabs can scroll horizontally. A UI can have as many tabs as needed.
  • Tabs organize content into categories to help users find different types of information quickly.
  • Tabs are displayed next to each other as peers, in categories of equal importance.


There are two types of tab indicators:

Tabs Pill Tabs Underline
  1. Pill indicator
  2. Bar indicator

Choose the right type according to emphasis. Pill indicator tabs are recommended for organizing full pages. They display the main content destinations. Bar indicator tabs are used within a content area to further separate related content and establish hierarchy.


Tabs anatomy

  1. Icon (optional)
  2. Label
  3. Active indicator
    1. Pill
    2. Bar
  4. Container


Tabs states

  1. Default
  2. Focused
  3. Selected


Tabs anatomy


When moving from one tab to the next the content below also slides left or right based on the tab movement.