All components
Navigation
Tabs
Pill-style and underline tabs with icons, badges, disabled tabs, sizing, and animated content.
Navigation
Interactive
Needs State Matrix
import { Tabs } from '@ivim/native/components';
Example
State Matrix
Interactive
Overview
Tokens
States
Second tab active
Overview
Tokens
States
Compact outline
Day
Week
Month
Disabled tab
Today
History
Export
Icons and badges
Inbox
4
Starred
New
Archive
Underline variant
Day
Week
3
Month
Props
Public props for this component. Required props are marked; defaults reflect the component implementation.
tabs
required
TabItem[]
{ label, value, content?, icon?, badge?, isDisabled? }. `icon` renders leading the label; `badge` (number | string) renders trailing as a small pill.
selectedKey / onSelectionChange
string / (key: string) => void
Controlled selection. Uncontrolled falls back to the first tab.
variant
'muted' | 'outline' | 'underline'
default: 'muted'
Container treatment. 'muted' and 'outline' are pill-style groups with a filled or tinted active tab; 'underline' drops the pill for a hairline divider under the row and a brand-colored indicator under the active tab.
size
'sm' | 'md'
default: 'md'
Padding and text scale.
fullWidth
boolean
default: false
Stretches tabs to fill the available width.
State coverage
Interaction and visual states this component supports.
default
pressed
disabled
active
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.