Tabs

A tabbed navigation component with animated active indicators. Supports underline and pills visual variants, controlled and uncontrolled modes, disabled tabs, and responsive horizontal scrolling on mobile.

Import

import { Tabs, TabsPanel } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Tabs
  tabs={[
    { key: 'overview', label: 'Overview' },
    { key: 'details', label: 'Details' },
    { key: 'reviews', label: 'Reviews' },
  ]}
  defaultTab="overview"
  onTabChange={(tab) => console.log(tab)}
/>

Pills variant

<Tabs
  tabs={[
    { key: 'all', label: 'All' },
    { key: 'active', label: 'Active' },
    { key: 'archived', label: 'Archived', disabled: true },
  ]}
  variant="pills"
  size="sm"
/>

With panel content

const [activeTab, setActiveTab] = useState('tab1');

<Tabs
  tabs={[
    { key: 'tab1', label: 'Tab 1' },
    { key: 'tab2', label: 'Tab 2' },
  ]}
  activeTab={activeTab}
  onTabChange={setActiveTab}
/>
{activeTab === 'tab1' && <TabsPanel>Content for Tab 1</TabsPanel>}
{activeTab === 'tab2' && <TabsPanel>Content for Tab 2</TabsPanel>}

Props

Tabs

Prop	Type	Default	Description
`tabs`*	TabItem<T>[]	-	Array of tab items, each with key, label, and optional disabled flag.
`defaultTab`	T	-	Initially active tab key (uncontrolled).
`activeTab`	T	-	Controlled active tab key.
`onTabChange`	(tab: T) => void	-	Callback when the active tab changes.
`variant`	'underline' \| 'pills'	`'underline'`	Visual style of the tab indicators.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the tab buttons.
`fullWidth`	boolean	`false`	Whether tabs stretch to fill the full container width.
`className`	string	-	Additional CSS class for the outer wrapper.
`tabListClassName`	string	-	Additional CSS class for the tab list nav element.

TabItem

Prop	Type	Default	Description
`key`*	string	-	Unique identifier for the tab.
`label`*	string	-	Display text for the tab button.
`disabled`	boolean	-	Whether the tab is disabled and not clickable.

TabsPanel

Prop	Type	Default	Description
`children`*	ReactNode	-	Panel content.
`className`	string	-	Additional CSS class for the panel wrapper.