Tabs

Installation

Package

@bigbang/ui

Import

import { Tabs } from '@bigbang/ui';

Source

Tabs.tsx

Storybook

Tabs · Playground

Tabs have four parts, all in the @bigbang/ui package: Tabs, TabList, Tab, TabPanel.

import { Tab, TabList, TabPanel, Tabs } from '@bigbang/ui';

<Tabs defaultValue="overview">
  <TabList label="Account sections">
    <Tab value="overview">Overview</Tab>
    <Tab value="activity" badge={3}>Activity</Tab>
  </TabList>
  <TabPanel value="overview">…</TabPanel>
  <TabPanel value="activity">…</TabPanel>
</Tabs>;

Props

Tabs

value

Description

Value of the selected tab when you control it. Use it with onValueChange.

Type

string

defaultValue

Description

Value of the tab selected on first render when you do not control it. Without it the first enabled tab is selected.

Type

string

onValueChange

Description

Called with the value of the newly selected tab.

Type

(value: string) => void

variant

Description

line underlines the selected tab and suits page sections; contained puts it on a raised pill inside a sunken track and suits compact views inside cards.

Type

'line' | 'contained'

Default

'line'

size

Description

Row height: 32 or 36 px. In contained the track has this height and the tabs inside it are 4 px shorter.

Type

'sm' | 'md'

Default

'md'

activation

Description

automatic selects a tab as soon as arrow keys focus it. manual only moves focus and selects on Enter or Space; use it when a panel is slow to render.

Type

'automatic' | 'manual'

Default

'automatic'

orientation

Description

Direction of the tab list and of the arrow keys that move between tabs. Vertical tabs sit beside their panels.

Type

'horizontal' | 'vertical'

Default

'horizontal'

material

Description

'solid' keeps the contained track solid under a glass Provider. The line variant has no surface and is never glass.

Type

'auto' | 'solid'

Default

'auto'

className

Description

For layout only: margins and placement.

Type

string

childrenRequired

Description

One TabList and one TabPanel per tab.

Type

ReactNode

TabList

labelRequired

Description

Name of the tab list for screen readers, such as "Hesap bölümleri". Required: a page can hold more than one tab list.

Type

string

className

Description

For layout only: margins and placement.

Type

string

childrenRequired

Description

Tab components.

Type

ReactNode

Tab

valueRequired

Description

Value that links the tab to the TabPanel with the same value.

Type

string

childrenRequired

Description

Visible label. Keep it to one or two words.

Type

ReactNode

icon

Description

Registered icon name shown before the label. Decorative: the label names the tab.

Type

IconName

badge

Description

Count shown after the label, such as unread items. It is read as part of the tab name.

Type

number

disabled

Description

Turns off the tab. Arrow keys still reach it (aria-disabled), so screen reader users learn it exists, but it cannot be selected.

Type

boolean

Default

false

className

Description

For layout only.

Type

string

TabPanel

valueRequired

Description

Value of the Tab that shows this panel.

Type

string

keepMounted

Description

Keeps the panel in the DOM while hidden, so its state (scroll, form input) survives switching tabs.

Type

boolean

Default

false

className

Description

For layout only.

Type

string

childrenRequired

Description

Panel content.

Type

ReactNode

Data attributes

• data-component: tabs, tab-list, tab, tabs-indicator, tab-panel.
• data-variant on the root; data-orientation on every part.
• data-active on the selected tab, data-disabled on a disabled tab (Base UI).
• data-activation-direction on a tab: the direction the indicator came from (left, right, up, down).