Tabs

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

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

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>
  );
}

The Tabs component is used for navigating frequently accesssed, 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

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.

API

Tabs props

Tabs exports

You can import this module like so:

import {Tabs} from 'baseui/tabs'

It exports the following components or utility functions:

• Tabs
• StatefulTabs
• Tab
• ORIENTATION
• STATE_CHANGE_TYPE
• StyledRoot
• StyledTab
• StyledTabBar
• StyledTabContent