Tabs

<Tabs selectedTab={selectedTabId} toggle={selectTab}>
  <TabList>
    <TabItem forTabPane={1}>
      Tab Active
      <span className="ml-400">
        <Badge size="xsmall">Badge</Badge>
      </span>
    </TabItem>
    <TabItem forTabPane={2}>Item</TabItem>
    <TabLink href="https://www.example.com">Item Link</TabLink>
  </TabList>
  <TabContent>
    <TabPane id={1}>Pane 1</TabPane>
    <TabPane id={2}>Pane 2</TabPane>
  </TabContent>
</Tabs>

<UncontrolledTabs defaultSelectedTab={1}>
  <TabList>
    <TabItem forTabPane={1}>
      Tab Active
      <span className="ml-400">
        <Badge size="xsmall">Badge</Badge>
      </span>
    </TabItem>
    <TabItem forTabPane={2}>Tab</TabItem>
    <TabLink href="#">Tab Link</TabLink>
  </TabList>
  <TabContent>
    <TabPane id={1}>Pane 1</TabPane>
    <TabPane id={2}>Pane 2</TabPane>
  </TabContent>
</UncontrolledTabs>

<TabList>
    <TabItem>
        <TabLink isSelected id="pane1-tab" target="pane1">
            Tab Active<span class="ml-400"><Badge size="xsmall">Badge</Badge></span>
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink id="pane2-tab" target="pane2">
            Tab
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink href="#">
            Tab Link
        </TabLink>
    </TabItem>
</TabList>
<TabPane id="pane1" isSelected label="pane1-tab">
    Pane 1
</TabPane>
<TabPane id="pane2" label="pane2-tab">
    Pane 2
</TabPane>