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.
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.
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.
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.
By default, a Tab will only occupy the vertical space from the top of the label to the active underline. This means the hit area will bleed out into the space above.The bleed can be disabled by setting the reserveHitArea prop to true.
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.
Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.