Tabs

When to use

Tabs switch between peer sections of the same context: the sections of a detail page, the types of a report, the subsections of a settings screen. The user looks at one section at a time.

When not to use

• To move between pages: If the address changes, use the sidebar (AppShell) or a Link.
• To filter the same data or change its view: If the panel does not change, use a SegmentedControl.
• When sections need comparing side by side: Show the content stacked or use an Accordion.
• For ordered steps: If step order matters, use a Stepper.

Anatomy

OverviewActivitySettings

Overview content goes here.

LightDark

Copy code

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Tabs defaultValue="overview">
        <TabList label="Sections">
          <Tab value="overview">Overview</Tab>
          <Tab value="activity">Activity</Tab>
          <Tab value="settings">Settings</Tab>
        </TabList>
        <TabPanel value="overview">Overview content goes here.</TabPanel>
        <TabPanel value="activity">Activity content goes here.</TabPanel>
        <TabPanel value="settings">Settings content goes here.</TabPanel>
      </Tabs>
    </Provider>
  );
}

1. Tab list (TabList): tablist role and a required label; in the line look it has no border, only the indicator under the selected tab.
2. Tab (Tab): Label, optional icon and count; 32 or 36 px with size.
3. Indicator: A line (line) or a raised pill (contained) that follows the selected tab.
4. Panel (TabPanel): Content of the selected tab; focusable.

Behaviour

• Click, Enter or Space selects a tab. Arrow keys move between tabs; the default activation="automatic" selects the focused tab at once.
• If a panel is slow to render, use activation="manual": arrow keys only move focus.
• The indicator slides to the selected tab on the spring.productive-base spring; the panel fades in. With reduced motion the indicator moves at once.
• When tabs are wider than their container the list scrolls sideways; the focused tab scrolls into view.
• Hidden panels leave the DOM. Pass keepMounted to keep state such as form input.

Guidelines

• Keep tab labels short and parallel; one or two words.
• Use one level of tabs per page; do not nest tabs.
• Use between 2 and 7 tabs. For more, rethink the navigation.
• Use line for page sections and contained for short choices inside a card.
• Explain a disabled tab nearby; otherwise hide the tab.

Content

• Labels are noun phrases; no verbs and no full stop.
• A count (badge) counts only items the user should act on.

Turkish	English
Genel bakış	Overview
Etkinlik	Activity
Ayarlar	Settings
Üyeler	Members

Glass

Under a Provider material="glass", the contained track turns glass and its indicator takes the higher-contrast tint. line tabs have no surface and are never glass. material="solid" keeps it solid.

Related components

• SegmentedControl: Changes the view of the same content.
• Accordion: Opens and closes stacked sections.
• ToggleGroup: Picks one value of a setting.