Bain Logo

Tabs

Jump to Props

Navigate between related pages or views while retaining context.

Import

Use

  • Price Breakdown
  • Trade Margin
  • Profit Pool
Price Breakdown graph

Key things to keep in mind:

  1. After importing Tabs from the design system, you should place each of your tabbed content as separate children of the Tabs component.
  2. Each of the children need the label prop set to set the Tab text
  3. Use the tabIcon prop to pass in an Icon component

Under the hood, the Tabs component extracts the label and conditionally renders the children based on the active tab matching the element's label.

Note for Developers: The current Tab implementation is very basic and should be improved in the future. For example, no routing / URL changes occur during tab changing. Also a11y needs to be fixed.

Full Width

Pass the fullWidth prop (boolean, false by default) to the Tabs component to make them stretch to fill the container.

With Icon

  • Overview
  • Profile
  • Messages
Overview! 🏡

Props

PropTypeDefaultDescription
childrenarray

Series of elements with the contents of each tab. Each child needs to have a `label` prop and an optional `tabIcon` can pass an icon in.

fullWidthbool

Whether or not the tabs should stretch to fill their container.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy