Tabs

Tabs organize content across different screens, data sets, and other interactions. They allow users to navigate between groups of related content.

Overview

Tabs are a Material Design component that enable content organization and navigation. They work best for switching between related content at the same level of hierarchy. Material Design 3 offers primary and secondary tab variants.

Live Preview

Primary Tabs

Content for Details tab

Secondary Tabs (Scrollable)

Tabs with Icons

Brand Properties

The following table shows Tab properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Active Indicator Color	Color	`#6750A4`	`#038012`	`#1A5129`
Active Label Color	Color	`#6750A4`	`#038012`	`#1A5129`
Inactive Label Color	Color	`#49454F`	`#6B7280`	`#6B7280`
Container Height	Number	`48dp`	`48px`	`48px`
Indicator Height	Number	`3dp`	`2px`	`2px`
Label Font	Font Family	`Roboto`	`Open Sans`	`Open Sans`
Label Size	Number	`14sp`	`14px`	`14px`
Label Weight (Active)	Weight	`500`	`600`	`600`
Icon Size	Number	`24dp`	`20px`	`20px`
Min Tab Width	Number	`90dp`	`90px`	`90px`
Horizontal Padding	Number	`16dp`	`16px`	`16px`
Divider Color	Color	`#CAC4D0`	`#E5E7EB`	`#E5E7EB`

Variants

Primary Tabs - For top-level navigation between major content areas
Secondary Tabs - For sub-navigation within a content area
Scrollable Tabs - When there are many tabs that don't fit on screen
Icon Tabs - Tabs with icons, with or without labels

Behavior

Exactly one tab is active at a time
Tab indicator animates between selected tabs
Scrollable tabs reveal more options on swipe
Content can swipe to change tabs on mobile

Accessibility

Use role="tablist" on the container
Use role="tab" on each tab button
Use aria-selected to indicate active state
Support arrow key navigation between tabs
Link tabs to their panels with aria-controls