Components

Tabs

Tabs with an animated indicator that switch between panels of the same context.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. Switch tabs to see the indicator travel on a spring.

Live example, StorybookOpen in Storybook

Default

Tabs come in the line look at 32 px high with 14 px labels. The indicator under the selected tab slides to the new tab; the panel fades in.

Overview content goes here.

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>
  );
}

Contained

variant="contained" shows the selected tab as a raised pill on a layer track. Use it for short view choices inside a card.

Activity content goes here.

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

export default function Contained() {
  return (
    <Provider locale="en-GB">
      <Tabs variant="contained" defaultValue="week">
        <TabList label="View">
          <Tab value="day">Daily</Tab>
          <Tab value="week">Weekly</Tab>
          <Tab value="month">Monthly</Tab>
        </TabList>
        <TabPanel value="day">Overview content goes here.</TabPanel>
        <TabPanel value="week">Activity content goes here.</TabPanel>
        <TabPanel value="month">Settings content goes here.</TabPanel>
      </Tabs>
    </Provider>
  );
}

Icon, count and disabled

icon puts a decorative icon before the label; badge shows a count after it and joins the tab name. disabled makes a tab unselectable. size="md" (the default) gives a 36 px height.

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

export default function IconsAndBadges() {
  return (
    <Provider locale="en-GB">
      <Tabs defaultValue="overview" size="md">
        <TabList label="Sections">
          <Tab value="overview" icon="home">
            Overview
          </Tab>
          <Tab value="activity" icon="bell" badge={3}>
            Activity
          </Tab>
          <Tab value="settings" icon="settings" disabled>
            Settings
          </Tab>
        </TabList>
      </Tabs>
    </Provider>
  );
}

Vertical

orientation="vertical" places the list beside the panel; arrow keys work up and down.

Activity content goes here.

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

export default function Vertical() {
  return (
    <Provider locale="en-GB">
      <Tabs orientation="vertical" defaultValue="activity">
        <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>
  );
}

Light and dark mode

Colours come from the color-line-*, color-fg-* and color-surface-* tokens; neither mode needs extra settings.

Activity content goes here.

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

export default function Contained() {
  return (
    <Provider locale="en-GB">
      <Tabs variant="contained" defaultValue="week">
        <TabList label="View">
          <Tab value="day">Daily</Tab>
          <Tab value="week">Weekly</Tab>
          <Tab value="month">Monthly</Tab>
        </TabList>
        <TabPanel value="day">Overview content goes here.</TabPanel>
        <TabPanel value="week">Activity content goes here.</TabPanel>
        <TabPanel value="month">Settings content goes here.</TabPanel>
      </Tabs>
    </Provider>
  );
}