---
name: Tabs
menu: UI Kit
---

# Tabs

### Examples

import { Playground } from "docz";
import { Flex, TabBar, Tab, TabContent, TabPane } from "./index";
import Container from "react-with-state-props";

## Primary Tabs

<Playground>
  <Container
    state={{ activeId: "two" }}
    render={props => (
      <div>
        <TabBar
          activeTab={props.activeId}
          onTabClick={id => props.setActiveId(id)}
        >
          <Tab tabID="one">One</Tab>
          <Tab tabID="two">Two</Tab>
          <Tab tabID="three">Three</Tab>
        </TabBar>
        <TabContent activeTab={props.activeId}>
          <TabPane tabID="one">Hola One</TabPane>
          <TabPane tabID="two">Hola Two</TabPane>
          <TabPane tabID="three">Hola Three</TabPane>
        </TabContent>
      </div>
    )}
  />
</Playground>

## Secondary Tabs

<Playground>
  <Container
    state={{ activeId: "two" }}
    render={props => (
      <div>
        <TabBar
          variant="secondary"
          activeTab={props.activeId}
          onTabClick={id => props.setActiveId(id)}
        >
          <Tab tabID="one">One</Tab>
          <Tab tabID="two">Two</Tab>
          <Tab tabID="three">Three</Tab>
        </TabBar>
        <TabContent activeTab={props.activeId}>
          <TabPane tabID="one">Hola One</TabPane>
          <TabPane tabID="two">Hola Two</TabPane>
          <TabPane tabID="three">Hola Three</TabPane>
        </TabContent>
      </div>
    )}
  />
</Playground>
