Components / Navigation / Primary tabsOpen in Figma

Primary tabs

Ready

Splits a screen into its main views, one at a time.

Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026

When to use

  • A screen has two to five views of the same thing that people switch between often.
  • Count: each view is a status bucket and the number matters (waiting, approved, rejected).
  • Underline: the views are different kinds of content (overview, list, people).

When not to use

If people need toUse
Switch between two ways of looking at one listSecondary tab
Narrow a list by a quick filterChips
Move between parts of a moduleBottom navigation

Anatomy

6Tab 1
12Tab 2
3Tab 3
Tab 1
Tab 2
Tab 3
  1. Count · count tabs; green when active
  2. Label · required
  3. Inactive count tab · Ink count, no bar
  4. Active underline tab · green text and 2px bar
  5. Inactive underline tab · Ink text, 1px grey line

Variants

VariantPurposeFigma
CountCount over label. Tabs hug their content and the row scrolls sidewaysDesigned
UnderlineEqual widths across the screen, label onlyDesigned
Underline with iconsA 16 icon before each labelDesigned

States

StateWhenWhat changesFigma
ActiveThe view on screenAntz green count or text, 2px Antz green barDesigned
InactiveOther viewsInk text; underline tabs keep a 1px LineDesigned
PressedFinger is downA 5% black layer over the tabTemporary rule

Behaviour

  • Tapping a tab swaps the content below; the top bar and tabs stay put.
  • Count tabs scroll sideways when they do not fit; the active tab scrolls into view.
  • Counts update when records change status; a tab with 0 stays visible.

Phone and tablet

PhoneTablet
Count tabsHug content, scroll sidewaysSame as phone (no tablet frame yet)
Underline tabsEqual widths, full screenEqual widths across the panel they sit in
Underline tab height4848

Content

PartRule
LabelOne or two words, sentence case: "Pending", "Approved"
CountThe number only; no brackets
Number of tabsUnderline two to four; count up to six

Do and don't

Tab 1
Tab 2
Tab 3
DoKeep underline tabs equal width with short labels.
Tab 1
Tab 2
Tab 3
Don'tChange the active colour from Antz green.
Tab 1
Tab 2
DoUse one row of Primary tabs per screen.
Tab 1
Tab 2
Tab A
Tab B
Don'tStack two rows of Primary tabs. Use a Secondary tab or chips for the second level.
Secondary tabChipsTop barList layout
← Record headerSecondary tab →