Skip to main content

Tabs

Examples

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

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>

With icons

Renders tabs and their tab headers


Code
<Tabs
containsFocusables
id="tabs-example"
>
<Tab
icon={<PencilIcon />}
title="Academic & Government"
>
<Button>
Academic & Government
</Button>
</Tab>
<Tab
icon={<PublicationSetsIcon />}
title="Health"
>
<Button>
Health
</Button>
</Tab>
<Tab
icon={<CaseStudyIcon />}
title="Industry"
>
<Button>
Industry
</Button>
</Tab>
</Tabs>

Scrollable

Renders scrollable tabs that overflow the container


Code
<Tabs
id="tabs-example"
scrollable
>
<Tab title="Save lives">
<Button>
Save lives
</Button>
</Tab>
<Tab title="Make breakthroughs">
<Button>
Make breakthroughs
</Button>
</Tab>
<Tab title="Publish with us">
<Button>
Publish with us
</Button>
</Tab>
<Tab title="Find journal articles">
<Button>
Find journal articles
</Button>
</Tab>
<Tab title="Discover products">
<Button>
Discover products
</Button>
</Tab>
<Tab title="Shop books">
<Button>
Shop books
</Button>
</Tab>
<Tab title="Work with us">
<Button>
Work with us
</Button>
</Tab>
<Tab title="Center some divs">
<Button>
Center some divs
</Button>
</Tab>
</Tabs>

Renders tabs and their tab headers

Academic & Government


Code
<Box
atoms={{
margin: '32px'
}}
>
<Tabs
hero
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>
</Box>

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

scrollable

boolean

Default: false

hero

boolean

Default: false

Tab

title

string

icon

ReactNode