Component size, gzipped: 17kb

This component is deprecated and will be removed in our next major version, slated for late 2021. We recommend using our new Tabs (Motion) component. It has an animated highlight and is compliant with the WAI-ARIA 1.1 Specification. The APIs are almost identical so give it a try!

Tabs

children

<Tab title="Tab Link 1">
  Content 1
</Tab>
<Tab title="Tab Link 2">
  Content 2
</Tab>
<Tab title="Tab Link 3">
  Content 3
</Tab>

<Tab title="Tab Link 1">
  Content 1
</Tab>
<Tab title="Tab Link 2">
  Content 2
</Tab>
<Tab title="Tab Link 3">
  Content 3
</Tab>

onChange

({ activeKey }) => {
  setActiveKey(activeKey);
}

({ activeKey }) => {
  setActiveKey(activeKey);
}

orientation

horizontal

vertical

activeKey

disabled

renderAll

import * as React from "react";
import { Tabs, Tab } from "baseui/tabs";

export default () => {
  const [activeKey, setActiveKey] = React.useState("0");
  return (
    <Tabs
      onChange={({ activeKey }) => {
        setActiveKey(activeKey);
      }}
      activeKey={activeKey}
    >
      <Tab title="Tab Link 1">Content 1</Tab>
      <Tab title="Tab Link 2">Content 2</Tab>
      <Tab title="Tab Link 3">Content 3</Tab>
    </Tabs>
  );
}

import * as React from "react";
import { Tabs, Tab } from "baseui/tabs";
export default () => {
  const [activeKey, setActiveKey] = React.useState("0");
  return (
    <Tabs
      onChange={({ activeKey }) => {
        setActiveKey(activeKey);
      }}
      activeKey={activeKey}
    >
      <Tab title="Tab Link 1">Content 1</Tab>
      <Tab title="Tab Link 2">Content 2</Tab>
      <Tab title="Tab Link 3">Content 3</Tab>
    </Tabs>
  );
}

API

The Tabs component is used for navigating frequently accessed, but distinct categories.

Accessibility

tab, shift + tab - to move focus between tabs.
Space or Enter - to display the selected tab's content
aria-selected, aria-disabled are applied to the tabs.
Roles: role=tab, role=tablist, role=tabpanel

Examples

Controlled Tabs Usage

Tab Link 1

Tab Link 2

Tab Link 3

Tab Content 1

Uncontrolled Tabs Usage

Tab Link 1

Tab Link 2

Tab Link 3

Tab 1 content

With Custom Keys

Black

White

Blue

⚫️ ️

We use tab order to provide default keys for each tab. You can however, pass in your own key to a tab and set activeKey accordingly.

Tabs SEO Friendly

Tab Link 1

Tab Link 2

Tab Link 3

Tab 1 content

Tab 2 content

Tab 3 content

Tabs Vertical Usage

Tab Link 1

Tab Link 2

Tab Link 3

Tab 3 content

Tabs Overrides

Tab Link 1

Tab Link 2

Tab Link 3

Tab Content 1

API

Tabs props

Name	Type	Description
activeKey	string	Key of the the tab to be selected.
children	react node	An array of Tab components.
disabled	boolean	True when all tabs are disabled.
onChange	function	Change handler that is called every time a new tab is selected.
orientation	enum	The orientation of the tab component.
overrides	custom	Lets you customize all aspects of the component.
renderAll	boolean	Renders all tab content for SEO purposes regardless of tab active state.

Tabs exports

You can import this module like so:

import {Tabs} from 'baseui/tabs'

It exports the following components or utility functions: