Panel 1
  • Accordion For a vertical, expandable list of content sections.
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 sit above the card.
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.
Tabs are left aligned by default, but this can be customised via the align prop on Tabs.
Panel 1
In cases where you only have a couple of tabs, you may find that the tab strip lacks visual affordance. To address this, you can set the divider prop to “full” on the Tabs component.
Panel 1
If you’ve placed the tab strip and tab content on different backgrounds, the divider line is likely to be redundant visual noise. To hide it, you can set the divider prop to “none” on the Tabs component.
Panel 1
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.
Panel 1
Add a Badge alongside the Tab by using the badge prop.
Panel 1
Tabs manage their own state by default. If you’d like to manage the state yourself, you must pass an item prop to each Tab and TabPanel element, as well as selectedItem and onChange props to TabsProvider.
Panel 2