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.
Renders tabs and their tab headers
Academic & Government
<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>
Renders tabs and their tab headers
<TabscontainsFocusablesid="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>
Renders tabs and their tab headers
<TabscontainsFocusablesid="tabs-example"><Tabicon={<PencilIcon />}title="Academic & Government"><Button>Academic & Government</Button></Tab><Tabicon={<PublicationSetsIcon />}title="Health"><Button>Health</Button></Tab><Tabicon={<CaseStudyIcon />}title="Industry"><Button>Industry</Button></Tab></Tabs>
Renders scrollable tabs that overflow the container
<Tabsid="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
<Boxatoms={{margin: '32px'}}><Tabsheroid="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>
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