Tabs

The Tabs and Tabs.Tab components are 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] = React.useState('tab1');

  return (
    <>
      <Tabs activeTab={activeTab} onTabClick={setActiveTab}>
        <Tabs.Tab id="tab1">Example 1</Tabs.Tab>
        <Tabs.Tab id="tab2">Example 2</Tabs.Tab>
        <Tabs.Tab id="tab3">Example 3</Tabs.Tab>
        <Tabs.Tab id="tab4" disabled>
          Example 4
        </Tabs.Tab>
      </Tabs>
      <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] = React.useState('tab1');
  return (
    <>
      <Tabs activeTab={activeTab} onTabClick={setActiveTab}>
        <Tabs.Tab id="tab1">Example 1</Tabs.Tab>
        <Tabs.Tab id="tab2">Example 2</Tabs.Tab>
        <Tabs.Tab id="tab3">Example 3</Tabs.Tab>
        <Tabs.Tab id="tab4" disabled>
          Example 4
        </Tabs.Tab>
      </Tabs>
      <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 id.
`onTabClick`	`(tabId: string) => void`	Function that will get called when a tab is clicked.
Props ending with * are required

Tabs.Tab

Prop Name	Type	Description
`id`	`string`	Tab identifier, must be unique.
`disabled`	`boolean`	Determines if the Tab is disabled.
Props ending with * are required

Beta

Introduction

Foundations

Layout

Actions & Inputs

Status & Feedback

Utilities

Tabs

API

Tabs

Tabs.Tab