Tabs

Examples

Tabs

Renders tabs and their tab headers

Academic & Government

Code

<Tabs id="tabs-example">
  <Tab title="Academic & Government">
    <Text>
      Academic & Government
    </Text>
  </Tab>
  <Tab title="Health">
    <Text>
      Health
    </Text>
  </Tab>
  <Tab title="Industry">
    <Text>
      Industry
    </Text>
  </Tab>
  <Tab title="Cabbage">
    <Text>
      Cabbage
    </Text>
  </Tab>
</Tabs>

With focusable children

View standalone

Renders tabs and their tab headers

Code

<Tabs
  containsFocusables
  id="tabs-example"
>
  <Tab title="Academic & Government">
    <Button>
      Academic & Government
    </Button>
  </Tab>
  <Tab title="Health">
    <Button>
      Health
    </Button>
  </Tab>
  <Tab title="Industry">
    <Button>
      Industry
    </Button>
  </Tab>
  <Tab title="Cabbage">
    <Button>
      Cabbage
    </Button>
  </Tab>
</Tabs>

Props

Tabs

`id`

string

A unique id that is used for determining the ids of the tabs and tab panels. This ensures there are no id conflicts when there are more than two Tabs components on a page.

`containsFocusables`

boolean

Default: false

`atoms`

Applies permitted design system styles. See styling documentation for more.

Tab

`title`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.