Tabs

Tabs reads label/disabled/badge off its Tab children and renders each one’s content into the matching panel — a Tab must be a direct child of Tabs and renders nothing on its own. Full keyboard support (arrow keys, Home/End, wrapping and skipping disabled tabs) and an animated sliding indicator for the segmented variant.

Usage


import { Tabs, Tab } from '@mav-labs-inc/mavkit-react'
 
<Tabs variant="underline" ariaLabel="Project sections">
  <Tab label="Overview">Overview content…</Tab>
  <Tab label="Activity" badge={5}>Activity content…</Tab>
  <Tab label="Billing" disabled>Unavailable</Tab>
</Tabs>

Examples

Segmented and underline

Overview content…

Vertical

Profile content…

Props

Tabs

Prop	Type	Default	Description
variant	'segmented' \| 'underline' \| 'vertical'	'segmented'
size	'sm' \| 'md' \| 'lg'	'md'
scrollable	boolean	false
ariaLabel	string	—
selectedIndex	number	—	Controlled selected index — pair with onSelectedIndexChange.
defaultSelectedIndex	number	0
onSelectedIndexChange	(index: number) => void	—
className	string	—
children	ReactNode	—	Tab elements.

Tab

Must be a direct child of Tabs. Renders null — Tabs reads its props directly.

Prop	Type	Default	Description
label*	ReactNode	—
disabled	boolean	—
badge	string \| number	—
children	ReactNode	—	Rendered into the matching panel when this tab is selected.