Bain Logo


Jump to Props

Navigate between related pages or views while retaining context.



  • 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! 🏡



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.


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

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