Skip to main content

Tabs

Examples

Tabs

Renders tabs and their tab headers

Academic & Government

Code
<Tabs id="tabs-example">
  <Tab title="Academic & Government">
    <Text>
      Academic & Government
    </Text>
  </Tab>
  <Tab title="Health">
    <Text>
      Health
    </Text>
  </Tab>
  <Tab title="Industry">
    <Text>
      Industry
    </Text>
  </Tab>
  <Tab title="Cabbage">
    <Text>
      Cabbage
    </Text>
  </Tab>
</Tabs>

With focusable children

Renders tabs and their tab headers

Code
<Tabs
  containsFocusables
  id="tabs-example"
>
  <Tab title="Academic & Government">
    <Button>
      Academic & Government
    </Button>
  </Tab>
  <Tab title="Health">
    <Button>
      Health
    </Button>
  </Tab>
  <Tab title="Industry">
    <Button>
      Industry
    </Button>
  </Tab>
  <Tab title="Cabbage">
    <Button>
      Cabbage
    </Button>
  </Tab>
</Tabs>

With icons

Renders tabs and their tab headers

Code
<Tabs
  containsFocusables
  id="tabs-example"
>
  <Tab
    icon={<PencilIcon />}
    title="Academic & Government"
  >
    <Button>
      Academic & Government
    </Button>
  </Tab>
  <Tab
    icon={<PublicationSetsIcon />}
    title="Health"
  >
    <Button>
      Health
    </Button>
  </Tab>
  <Tab
    icon={<CaseStudyIcon />}
    title="Industry"
  >
    <Button>
      Industry
    </Button>
  </Tab>
</Tabs>

Scrollable

Renders scrollable tabs that overflow the container

Code
<Tabs
  id="tabs-example"
  scrollable
>
  <Tab title="Save lives">
    <Button>
      Save lives
    </Button>
  </Tab>
  <Tab title="Make breakthroughs">
    <Button>
      Make breakthroughs
    </Button>
  </Tab>
  <Tab title="Publish with us">
    <Button>
      Publish with us
    </Button>
  </Tab>
  <Tab title="Find journal articles">
    <Button>
      Find journal articles
    </Button>
  </Tab>
  <Tab title="Discover products">
    <Button>
      Discover products
    </Button>
  </Tab>
  <Tab title="Shop books">
    <Button>
      Shop books
    </Button>
  </Tab>
  <Tab title="Work with us">
    <Button>
      Work with us
    </Button>
  </Tab>
  <Tab title="Center some divs">
    <Button>
      Center some divs
    </Button>
  </Tab>
</Tabs>

Hero variant

Renders tabs and their tab headers

Academic & Government

Code
<Box
  atoms={{
    margin: '32px'
  }}
>
  <Tabs
    hero
    id="Tabs-example"
  >
    <Tab
      icon={<PencilIcon />}
      title="Academic & Government"
    >
      <Text>
        Academic & Government
      </Text>
    </Tab>
    <Tab title="Health">
      <Text>
        Health
      </Text>
    </Tab>
    <Tab title="Industry">
      <Text>
        Industry
      </Text>
    </Tab>
    <Tab title="Cabbage">
      <Text>
        Cabbage
      </Text>
    </Tab>
  </Tabs>
</Box>

Props

Tabs

id

string

A unique id that is used for determining the ids of the tabs and tab panels. This ensures there are no id conflicts when there are more than two Tabs components on a page.

containsFocusables

boolean

Default: false

scrollable

boolean

Default: false

hero

boolean

Default: false

Tab

title

string

icon

ReactNode