<GuideExample label="gray">

  <Tabs gray activeTabIndex={0}>

    <TabNav>

      <TabTitle>Tab 1 Title</TabTitle>

      <TabTitle>Tab 2 Title</TabTitle>

      <TabTitle>Tab 3 Title</TabTitle>

    </TabNav>

    <TabContents>

      <TabSection>Tab 1 content</TabSection>

      <TabSection>Tab 2 content</TabSection>

      <TabSection>Tab 3 content</TabSection>

    </TabContents>

  </Tabs>

</GuideExample>

<GuideExample label="transparent">

  <Tabs transparent activeTabIndex={0}>

    <TabNav>

      <TabTitle>Tab 1 Title</TabTitle>

      <TabTitle>Tab 2 Title</TabTitle>

      <TabTitle>Tab 3 Title</TabTitle>

    </TabNav>

    <TabContents>

      <TabSection>Tab 1 content</TabSection>

      <TabSection>Tab 2 content</TabSection>

      <TabSection>Tab 3 content</TabSection>

    </TabContents>

  </Tabs>

</GuideExample>

<GuideExample label="translucent">

  <Tabs translucent activeTabIndex={0}>

    <TabNav>

      <TabTitle>Tab 1 Title</TabTitle>

      <TabTitle>Tab 2 Title</TabTitle>

      <TabTitle>Tab 3 Title</TabTitle>

    </TabNav>

    <TabContents>

      <TabSection>Tab 1 content</TabSection>

      <TabSection>Tab 2 content</TabSection>

      <TabSection>Tab 3 content</TabSection>

    </TabContents>

  </Tabs>

</GuideExample>

<GuideExample label="dark">

  <Tabs dark activeTabIndex={0}>

    <TabNav>

      <TabTitle>Tab 1 Title</TabTitle>

      <TabTitle>Tab 2 Title</TabTitle>

      <TabTitle>Tab 3 Title</TabTitle>

    </TabNav>

    <TabContents>

      <TabSection>Tab 1 content</TabSection>

      <TabSection>Tab 2 content</TabSection>

      <TabSection>Tab 3 content</TabSection>

    </TabContents>

  </Tabs>

</GuideExample>

() => {

  class TabStory extends React.Component {

    constructor(props) {

      super(props)

      this.state = {

        activeTabIndex: 0,

      }

      this.onTabChange = this.onTabChange.bind(this)

    }

​

    onTabChange(index) {

      this.setState({ activeTabIndex: index })

    }

​

    render() {

      return (

        <Tabs

          onTabChange={this.onTabChange}

          activeTabIndex={this.state.activeTabIndex}

        >

          <TabNav>

            <TabTitle>Tab 1 Title</TabTitle>

            <TabTitle>Tab 2 Title</TabTitle>

            <TabTitle>Tab 3 Title</TabTitle>

          </TabNav>

          <TabContents>

            <TabSection>Tab 1 content</TabSection>

            <TabSection>Tab 2 content</TabSection>

            <TabSection>Tab 3 content</TabSection>

          </TabContents>

        </Tabs>

      )

    }

  }

​

  return <TabStory />

}