Skip to main contentCarbon Design System

Tabs

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

Documentation

React
react icon
Angular (Community)
angular icon
Vue (Community)
vue icon
Web Components (Community)
webcomponents icon

Live demo

CodeSandbox React Angular Vue Vanilla Web Components 


<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>
TabList
Modifiers
activation
Tab
Modifiers
Edit this page on GitHub
Previous
Tabs: Style
Next
Tabs: Accessibility