Top
TabPanel - Tab align & positioning
TabPanel
The <TabPanel /> supports multiple tab alignment strategies via the tabAlign prop:
  • "start" - align tabs at the start of the container. This is the default alignment.
  • "center" - align tabs at the center of the container.
  • "end" - align tabs at the end of the container.
  • "stretch" - stretch the tabs to fill the container available space.
  • "space-around" - add space around the tabs - it's how the flexbox space-around works.
  • "space-between" - add space between the tabs - it's how the flexbox space-around works. Space is not added before the first tab and after the last tab.
The <TabPanel /> supports multiple positions for the tabs in the <TabStrip />strategies via the tabPosition prop:
  • "top" - the tabs are placed at the top of the container, above the content. This is the default position.
  • "bottom" - the tabs are placed at the bottom of the container, under the content.
  • "left" - the tabs are placed at the left of the container.
  • "right" - the tabs are placed at the right of the container.
For tabPosition="left" or tabPosition="right", it's also possible to have vertical tabs.