Used to navigate tabs of different pages of content that have no sequential or interdependent relationship process. If needed, ‘counter’ indicates quantity of something in a tab.

Default

<Tabs>
  <Tab name="Overview" />
  <Tab name="CV" />
  <Tab name="Shows" />
  <Tab name="Auction Results" />
  <Tab name="Articles" />
  <Tab name="Related Artists" />
</Tabs>

Rendering content

How

<Tabs
  initialTabIndex={1}
  onChange={(activeTab) => {
    console.log(activeTab)
  }}
>
  <Tab name="Hello">Hello</Tab>
  <Tab name="How">How</Tab>
  <Tab name="Are">Are</Tab>
  <Tab name="You?">You?</Tab>
</Tabs>

With arbitrary data and onChange handler

<Tabs
  onChange={(activeTab) => {
    console.log(activeTab.data)
  }}
>
  <Tab data={{ target: "#about" }} name="About" />
  <Tab data={{ target: "#pricing" }} name="Pricing" />
  <Tab data={{ target: "#condition" }} name="Condition" />
</Tabs>

With custom justification

<Tabs justifyContent="center">
  <Tab name="About" />
  <Tab name="Pricing" />
  <Tab name="Condition" />
</Tabs>

With separator

♞

<Tabs justifyContent="center" separator={<Box mx={1}>♞</Box>}>
  <Tab name="About" />
  <Tab name="Pricing" />
  <Tab name="Condition" />
</Tabs>

With superscript

<Tabs justifyContent="center">
  <Tab
    name={
      <>
        Open <Sup color="brand">100</Sup>
      </>
    }
  />
  <Tab
    name={
      <>
        Ready to ship <Sup color="brand">4</Sup>
      </>
    }
  />
  <Tab name={<>Complete</>} />
</Tabs>

Can auto scroll to center active tabs

<Tabs autoScroll>
  <Tab name="Pricing" />
  <Tab name="Rainbows" />
  <Tab name="Unicorns" />
  <Tab name="Falafel" />
  <Tab name="Delorean" />
  <Tab name="Po-ta-toes" />
  <Tab name="Jesuits" />
  <Tab name="Mastadon" />
  <Tab name="Funicular" />
  <Tab name="DiCaprio" />
  <Tab name="Fathomable" />
  <Tab name="Shiny" />
  <Tab name="Cyprus" />
  <Tab name="UMass" />
  <Tab name="Skiing" />
  <Tab name="Liver" />
  <Tab name="Magazine" />
</Tabs>

Supports empty(null) tabs by ignoring them

<Tabs>
  {null}
  {false}
  <Tab name="Pricing" />
</Tabs>

On this page

Default

Rendering content

With arbitrary data and onChange handler

With custom justification

With separator

With superscript

Can auto scroll to center active tabs

Supports empty(null) tabs by ignoring them