Tabs | Mineral UI

Maximum Tab Width

Use the maxTabWidth prop to constrain the width of each Tab. Note that if the Tab title is longer than the maximum width, it will be truncated but accessible via Tooltip. Also note that if maxWidth is passed to a Tab, it will take precedence.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

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