Tabs keep related content in a single container that is shown and hidden through navigation.
Read more about when and how to use the Tabs component on the website.
Install the package
yarn add @hig/tabs @hig/theme-context @hig/theme-data
Import the component
<Tabs><Tab ="details" ="Details">Details content</Tab><Tab ="activities" ="Activities">Activities content</Tab><Tab ="inspector" ="Inspector">Inspector content</Tab></Tabs>
The visual styles of
Tabs can be customized by its props, available values can be found via:
Complex tabs are composed of an interactive container, text label, divider and optional close icon. Complex tabs only works when
varient is set to
className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.