Components / Navigation / Secondary tabOpen in Figma

Secondary tab

Ready

Switches between two or three ways of looking at the same content.

Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026

When to use

  • One list or panel can be seen two or three ways: all and mine, list and calendar.
  • The switch sits under the top bar or Primary tabs and changes only what is below it.

When not to use

If people need toUse
Move between the main views of a screenPrimary tabs
Filter a list by many valuesChips
Turn a setting on or offSwitch

Anatomy

  1. Track · required
  2. Active segment · required, one at a time
  3. Inactive segment · required

Variants

VariantPurposeFigma
Antz greenThe standard active fillDesigned
Teal inkWhen green would clash with a green main action or status nearbyDesigned

States

StateWhenWhat changesFigma
ActiveThe view on screenFilled segment, white textDesigned
InactiveOther viewsNo fill, Ink textDesigned
PressedFinger is down on an inactive segment5% black fill on the segmentTemporary rule

Behaviour

  • Exactly one segment is active. Tapping another swaps the view straight away; nothing is saved.
  • Segments hug their labels; the track hugs the segments and sits at the left of the content.
  • The fill moves to the new segment in 180ms; reduced motion turns this off.

Phone and tablet

PhoneTablet
Row padding16 sides20 sides
SizeSame on bothSame on both

Content

PartRule
Segment labelOne or two words, sentence case: "All", "Created by me"
Number of segmentsTwo or three

Do and don't

DoKeep it to two or three short labels.
Don'tSqueeze in more segments than fit. Use Primary tabs or chips.
Primary tabsChipsList layout
← Primary tabsChips →