Tabs

Overview

The Tabs component organizes related content into selectable panels. Each tab can render content via a Component reference or inline content ReactNode.

Basic Usage

import { Tabs } from '@fsai/shared-ui';

<Tabs
  tabs={[
    { id: 'overview', label: 'Overview', content: <OverviewContent /> },
    { id: 'details', label: 'Details', content: <DetailsContent /> },
    { id: 'activity', label: 'Activity', content: <ActivityContent /> },
  ]}
/>

With Component Reference

For lazy-mounted tab panels, use Component instead of content:

<Tabs
  tabs={[
    { id: 'overview', label: 'Overview', Component: OverviewTab },
    { id: 'settings', label: 'Settings', Component: SettingsTab },
  ]}
/>

With Icons and Badges

<Tabs
  tabs={[
    { id: 'inbox', label: 'Inbox', Icon: 'InboxFilled', badge: 3, content: <Inbox /> },
    { id: 'sent', label: 'Sent', Icon: 'Send', content: <Sent /> },
  ]}
/>

Controlled Mode

<Tabs
  tabs={tabs}
  selectedIndex={activeTab}
  onChangeIndex={setActiveTab}
/>

Props

Prop	Type	Default	Description
`tabs`	`TabType[]`	—	Required. Tab definitions
`selectedIndex`	`number`	—	Controlled active tab index
`onChangeIndex`	`(index: number) => void`	—	Tab change handler
`defaultIndex`	`number`	`0`	Initial tab (uncontrolled)
`headerRight`	`ReactNode`	—	Content rendered right of the tabs
`extraButtons`	`Array<{ label: string; onClick: () => void; icon?: IconName }>`	—	Additional action buttons
`spreadTabsEvenlyAcrossWidth`	`boolean`	`false`	Equal-width tabs
`panelsClassName`	`string`	—	Class for the panels container
`className`	`string`	—	Class for the root element

TabType

Field	Type	Required	Description
`id`	`string`	Yes	Unique tab identifier
`label`	`string`	Yes	Tab label text
`Component`	`ComponentType`	XOR content	Lazy-mounted panel component
`content`	`ReactNode`	XOR Component	Inline panel content
`Icon`	`ComponentType \| IconName`	No	Tab icon
`badge`	`number`	No	Badge count
`disabled`	`boolean`	No	Disables the tab

Guidelines

Do use descriptive, short tab labels (1-2 words)
Do use Component for heavy content that should be lazy-mounted
Do place the most important/default tab first
Don't use more than 6-7 tabs — consider a different navigation pattern
Don't use tabs for sequential workflows — use Steps instead

Tabs

On this page