Tabs

Allow users to navigate between related blocks of content, showing one section at a time.

Storybook documentation

Tab content 1

React

<Tabs>
  <TabsControl>
    <Tab label="Tab 1" index={0} />
    <Tab label="Tab 2" index={1} />
    <Tab label="Tab 3" index={2} />
  </TabsControl>
  <TabsPanel index={0}>Tab content 1</TabsPanel>
  <TabsPanel index={1}>Tab content 2</TabsPanel>
  <TabsPanel index={2}>Tab content 3</TabsPanel>
</Tabs>

CSS

<div class="tabs">
  <div role="tablist" class="tabs_controls">
    <button class="tab" role="tab" aria-selected="true" aria-controls="tabpanel-0" id="tab-0" tabindex="0">Label</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="tabpanel-1" id="tab-1" tabindex="-1">Label</button>
    <button class="tab tab-active" role="tab" aria-selected="false" aria-controls="tabpanel-2" id="tab-2" tabindex="-1">Label</button>
  </div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-0" aria-labelledby="tab-0"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2"></div>
</div>

Props

Direction

Tab content 1

Tab content 1

React

<Tabs>
  <TabsControl>
    <Tab label="Tab 1" index={0} />
    <Tab label="Tab 2" index={1} />
    <Tab label="Tab 3" index={2} />
  </TabsControl>
  <TabsPanel index={0}>Tab content 1</TabsPanel>
  <TabsPanel index={1}>Tab content 2</TabsPanel>
  <TabsPanel index={2}>Tab content 3</TabsPanel>
</Tabs>

<Tabs direction="landscape">
  <TabsControl>
    <Tab label="Tab 1" index={0} />
    <Tab label="Tab 2" index={1} />
    <Tab label="Tab 3" index={2} />
  </TabsControl>
  <TabsPanel index={0}>Tab content 1</TabsPanel>
  <TabsPanel index={1}>Tab content 2</TabsPanel>
  <TabsPanel index={2}>Tab content 3</TabsPanel>
</Tabs>

CSS

<div class="tabs">
  <div role="tablist" class="tabs_controls">
    <button class="tab" role="tab" aria-selected="true" aria-controls="tabpanel-0" id="tab-0" tabindex="0">Label</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="tabpanel-1" id="tab-1" tabindex="-1">Label</button>
    <button class="tab tab-active" role="tab" aria-selected="false" aria-controls="tabpanel-2" id="tab-2" tabindex="-1">Label</button>
  </div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-0" aria-labelledby="tab-0"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2"></div>
</div>

<div class="tabs tabs-landscape">
  <div role="tablist" class="tabs_controls">
    <button class="tab" role="tab" aria-selected="true" aria-controls="tabpanel-0" id="tab-0" tabindex="0">Label</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="tabpanel-1" id="tab-1" tabindex="-1">Label</button>
    <button class="tab tab-active" role="tab" aria-selected="false" aria-controls="tabpanel-2" id="tab-2" tabindex="-1">Label</button>
  </div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-0" aria-labelledby="tab-0"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2"></div>
</div>

Dense

Tab content 1

React

<Tabs dense>
  <TabsControl>
    <Tab label="Label" index={0} />
    <Tab label="Label" index={1} />
    <Tab label="Label" index={2} />
  </TabsControl>
  <TabsPanel index={0}></TabsPanel>
  <TabsPanel index={1}></TabsPanel>
  <TabsPanel index={2}></TabsPanel>
</Tabs>

CSS

<div class="tabs tabs-dense">
  <div role="tablist" class="tabs_controls">
    <button class="tab" role="tab" aria-selected="true" aria-controls="tabpanel-0" id="tab-0" tabindex="0">Label</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="tabpanel-1" id="tab-1" tabindex="-1">Label</button>
    <button class="tab tab-active" role="tab" aria-selected="false" aria-controls="tabpanel-2" id="tab-2" tabindex="-1">Label</button>
  </div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-0" aria-labelledby="tab-0"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2"></div>
</div>

Has border

Tab content 1

React

<Tabs hasBorder>
  <TabsControl>
    <Tab label="Label" index={0} />
    <Tab label="Label" index={1} />
    <Tab label="Label" index={2} />
  </TabsControl>
  <TabsPanel index={0}></TabsPanel>
  <TabsPanel index={1}></TabsPanel>
  <TabsPanel index={2}></TabsPanel>
</Tabs>

CSS

<div class="tabs tabs-hasBorder">
  <div role="tablist" class="tabs_controls">
    <button class="tab" role="tab" aria-selected="true" aria-controls="tabpanel-0" id="tab-0" tabindex="0">Label</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="tabpanel-1" id="tab-1" tabindex="-1">Label</button>
    <button class="tab tab-active" role="tab" aria-selected="false" aria-controls="tabpanel-2" id="tab-2" tabindex="-1">Label</button>
  </div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-0" aria-labelledby="tab-0"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-1" aria-labelledby="tab-1"></div>
  <div class="tabs_panel" role="tabpanel" id="tabpanel-2" aria-labelledby="tab-2"></div>
</div>