Tabs

Basic Usage

Place Tab components within Tabs to allow users to navigate related content in the same space. Use label to briefly describe the related content for users of assistive technologies.

Note

All of the following examples apply a height in order to prevent shifting of the layout when Tabs contains content of different lengths.

Fluorite (also called fluorspar) is the mineral form of calcium fluoride, CaF2. It belongs to the halide minerals. It crystallizes in isometric cubic habit, although octahedral and more complex isometric forms are not uncommon. The Mohs scale of mineral hardness, based on scratch hardness comparison, defines value 4 as Fluorite. Fluorite is a colorful mineral, both in visible and ultraviolet light, and the stone has ornamental and lapidary uses. Industrially, fluorite is used as a flux for smelting, and in the production of certain glasses and enamels. The purest grades of fluorite are a source of fluoride for hydrofluoric acid manufacture, which is the intermediate source of most fluorine-containing fine chemicals.

<Tabs defaultSelectedTabIndex={1} label="Minerals" height="7.75em">
  <Tab title="Malachite">
    <Text>{content.malachite}</Text>
  </Tab>
  <Tab title="Fluorite">
    <Text>{content.fluorite}</Text>
  </Tab>
  <Tab title="Magnetite">
    <Text>{content.magnetite}</Text>
  </Tab>
</Tabs>