Tabs

Underline, pill, vertical, with badges.
In glass mode a filled selection is a control-layer pane behind the selected label, in the platform skin's selected tint with readable foreground ink. iOS and web share the capsule segmented control; Android underline tabs keep their ink indicator. Solid mode keeps the complete platform treatment.
iOS
Android
Web
tsx
<Tabs tabs={["General", "Security", "Notifications"]} />

Props

Prop
Description
tabs
TabItem[]
Triggers, left to right. Strings, or `{ label, badge }` for a count.
active
number
Index of the active trigger; omit for uncontrolled use.
defaultActive
number
Initial active index for uncontrolled use (a bare <Tabs /> switches out of the box).
onSelect
(index: number) => void
Called with the pressed trigger's index (both modes). Matches TabBar and ButtonGroup, which also fire `onSelect` for the active-index change.
testID
string
E2E hook forwarded to the tablist row.
pills
boolean
Look (pick one; default is the underline look). Precedence when more than one is passed: pills, then vertical, then underline.
vertical
boolean
Look (pick one; default is the underline look). Precedence when more than one is passed: pills, then vertical, then underline.
underline
boolean
Look (pick one; default is the underline look). Precedence when more than one is passed: pills, then vertical, then underline.
block
boolean
Layout: equal full-width triggers vs. leading-aligned hugging triggers.
wrap
boolean
Layout (the underline and pills rows): a row longer than its container wraps onto further lines inside one track instead of panning in the overflow scroller, so every tab stays on screen at once. The track fills its container and grows taller, its corners concentric with the pills. `block` never overflows and wins; a `responsive` vertical rail honors it once it flattens.
responsive
boolean
Responsive (vertical look only): render the EXISTING horizontal underline look when the component's own CONTAINER is at or below `sm` (640), where a side rail would starve the panel beside it. Container-measured with a viewport seed. `pills` and `underline` are unaffected.
disabled
boolean
—
style
StyleProp<ViewStyle>
Outer layout composition only (width/flex within a parent), never a restyle hook.

Do & Don’t

Underline

Don’t
Overview
Activity
Settings
Underlining every tab erases the active indicator: there is no way to tell which view is current.
Do
Underline and foreground-color only the active tab; leave the rest muted with no rule.

Pill

Don’t
All
Active
Archived
Giving every pill the raised background makes the group read as three buttons, not one selection.
Do
Exactly one pill gets the elevated background; the rest sit flat on the muted track.

Vertical

Don’t
General
Security
Notifications
With no filled active item the rail collapses into a plain link list and loses its current selection.
Do
Fill the active rail item with the accent background so the selected pane is unmistakable.
← TabBar
Toast →