Tabs

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.

Getting started

Install the package

yarn add @hig/tabs @hig/theme-context @hig/theme-data

Import the component

import Tabs, { Tab } from "@hig/tabs";

Basic usage

<Tabs>
  <Tab key="details" label="Details">Details content</Tab>
  <Tab key="activities" label="Activities">Activities content</Tab>
  <Tab key="inspector" label="Inspector">Inspector content</Tab>
</Tabs>

Customization

The visual styles of Tabs can be customized by its props, available values can be found via:

import {
  AVAILABLE_ALIGNMENTS,
  AVAILABLE_VARIANTS,
  AVAILABLE_ORIENTATIONS,
  alignments,
  variants,
  orientations
} from "@hig/tabs";

Complex Tabs

Complex tabs are composed of an interactive container, text label, divider and optional close icon. Complex tabs only works when varient is set to box or canvas.

Custom CSS

Use the 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.