Tabs

All tab components must be nested within a TabsProvider which provides the state.
Somewhere within TabsProvider you must:
  • Provide a Tabs component containing multiple Tab components.
  • Provide a TabsPanels component containing multiple TabPanel components.
The Tabs and TabPanels components can be positioned wherever you like, e.g. the tab panels can be nested within a Card while the tabs are outside the card.
Space above tab text is cropped by default to ensure it adheres to Braid’s layout philosophy. If you’d like to reinstate this space (e.g. if your tabs are presented as a standalone, full-width element within your layout), you can provide the reserveHitArea boolean prop to Tabs.
Tabs are horizontally scrollable when they’re too wide to fit on screen. If you’d like to align the tabs with content below them (e.g. when the tab panels are inside a card but the tabs are outside), you can provide a gutter prop to Tabs that accepts a value from Braid’s space scale.
State is managed internally by default. If you’d like to manage tab state from the outside, you must pass an item prop to each Tab element, as well as selectedItem and onChange props to TabsProvider.

Left aligned

Center aligned

With gutter

With gutter and reserved hit area

Further References