Tabs

Separates content into groups within a single context.

Examples

<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>

Examples Uncontrolled

examples

<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" targetPaneId="pane-1">
            Tab Active<span class="ml-400"><Badge size="xsmall">Badge</Badge></span>
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink id="pane2-tab" targetPaneId="pane-2">
            Tab
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink href="#">
            Tab Link
        </TabLink>
    </TabItem>
</TabList>
<TabPane id="pane-1" isSelected label="pane1-tab">
    Pane 1
</TabPane>
<TabPane id="pane-2" label="pane2-tab">
    Pane 2
</TabPane>

Our extra API props for React TabLink component

We use the standard Tabs implementation except for the TabLink component, which we overload and fine-tune for accessibility. Unlike the original implementation, it has an optional isSelected prop that sets the class and accessibility tags on the link component, which otherwise doesn't have them.

Prop name	Type	Default	Required	Description
`isSelected`	`boolean`	`false`	no	is tab selected
`UNSAFE_className`	`string`	-	no	Wrapper custom classname

API for Twig component

use this documentation

API for React component

use this documentation

On this page