Tabs

The Tabs component is used to organize and navigate between content types that are related and at the same level of information architecture heirarchy. Tabs Design Guidelines.

Content 1

Edit the code below to see your changes live!

function Example() {
  const [activeTab, setActiveTab] = useState('tab1');

  const items = [
    { id: 'tab1', title: 'Example 1' },
    { id: 'tab2', title: 'Example 2' },
    { id: 'tab3', title: 'Example 3' },
    { id: 'tab4', title: 'Example 4', disabled: true },
  ];

  return (
    <>
      <Tabs activeTab={activeTab} items={items} onTabClick={setActiveTab} />
      <Box marginTop="large">
        {activeTab === 'tab1' && <Text>Content 1</Text>}
        {activeTab === 'tab2' && <Text>Content 2</Text>}
        {activeTab === 'tab3' && <Text>Content 3</Text>}
        {activeTab === 'tab4' && <Text>Content 4</Text>}
      </Box>
    </>
  );
}

function Example() {
  const [activeTab, setActiveTab] = useState('tab1');
  const items = [
    { id: 'tab1', title: 'Example 1' },
    { id: 'tab2', title: 'Example 2' },
    { id: 'tab3', title: 'Example 3' },
    { id: 'tab4', title: 'Example 4', disabled: true },
  ];
  return (
    <>
      <Tabs activeTab={activeTab} items={items} onTabClick={setActiveTab} />
      <Box marginTop="large">
        {activeTab === 'tab1' && <Text>Content 1</Text>}
        {activeTab === 'tab2' && <Text>Content 2</Text>}
        {activeTab === 'tab3' && <Text>Content 3</Text>}
        {activeTab === 'tab4' && <Text>Content 4</Text>}
      </Box>
    </>
  );
}

API

Tabs

Prop Name	Type	Description
`activeTab`	`string`	Determines the active tab by tab id.
`items`	`TabItem[]`	See below for usage.
`onTabClick`	`(tabId: string) => void`	Function that will get called when a tab is clicked.

Props ending with * are required

Tabs[TabItem]

Prop Name	Type	Description
`id` *	`string`	Tab identifier, must be unique.
`title` *	`string`	Title for the tab.
`disabled`	`boolean`	Determines if the Tab is disabled.

Props ending with * are required

Beta