Tabs – Carbon Design System

Preview the tabs component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Tabs component


<div style={{ width: '75%' }}>
  <Tabs>
    <TabList aria-label="List of tabs">
      <Tab>Tab Label 1</Tab>
      <Tab>Tab Label 2</Tab>
      <Tab>Tab Label 3</Tab>
      <Tab>
          Tab Label 4 with a very long long title
      </Tab>
      <Tab>Tab Label 5</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Tab Panel 1</TabPanel>
      <TabPanel>
        Tab Panel 2 <Button>Example button</Button>
      </TabPanel>
      <TabPanel>Tab Panel 3</TabPanel>
      <TabPanel>Tab Panel 4</TabPanel>
      <TabPanel>Tab Panel 5</TabPanel>
    </TabPanels>
  </Tabs>
</div>


<div style={{ width: '75%' }}>
  <Tabs>
    <TabList aria-label="List of tabs">
      <Tab>Tab Label 1</Tab>
      <Tab>Tab Label 2</Tab>
      <Tab>Tab Label 3</Tab>
      <Tab>
          Tab Label 4 with a very long long title
      </Tab>
      <Tab>Tab Label 5</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Tab Panel 1</TabPanel>
      <TabPanel>
        Tab Panel 2 <Button>Example button</Button>
      </TabPanel>
      <TabPanel>Tab Panel 3</TabPanel>
      <TabPanel>Tab Panel 4</TabPanel>
      <TabPanel>Tab Panel 5</TabPanel>
    </TabPanels>
  </Tabs>
</div>

Edit this page on GitHub

Tabs: Style

Tabs: Accessibility