AurumPillTabs

Aurum's pill tabs — a single-select segmented switch that rides a soft grey track, with the active segment lifted as a dark gradient pill that slides between cells.

familyNavigation
platformiOS 17+ · SwiftUI
figmacomponent master ↗
sourceSources/Aurum/Component/Navigation/AurumPillTabs.swift
code connectFigmaConnect/Sources/AurumFigmaConnect/AurumPillTabs.figma.swift

Aurum's pill tabs — a single-select segmented switch that rides a soft grey track, with the active segment lifted as a dark gradient pill that slides between cells. The SwiftUI port of aurum-android's AurumPillTabs, rendering Figma node 7741:7306 across its two and three-segment variants.

Use it where AurumTabRow would be too heavy: that is page-level navigation with an underline indicator, this is an inline filter or mode switch scoped to one section.

Intended use

An inline, single-select switch over 2–3 short, mutually exclusive views of the same content (a period filter, a buy/sell mode). For page-level destinations use AurumTabRow; for a boolean use AurumSwitch.

Do

  • Keep to 2–3 segments — the track divides its width evenly.
  • Hoist the selection in your screen state and drive selectedIndex.
  • Pair each label with a monosemic 16 pt glyph, or omit icons across the whole set.

Don’t

  • Recolour the track or the active pill — the gradient is the component's identity.
  • Use it for navigation between screens — that's AurumTabRow.
  • Exceed three segments; switch to AurumTabRow instead.

Code Connect

Mapped to Figma node 7741:7306 ↗ — SwiftUI snippets appear in Dev Mode for the latest release.