Tabs
Use tabs to organize in-page navigation, segmenting mutually-exclusive content under a single organizational principle. For more guideline usage see NNG's article "Tabs, Used Right".
EuiTabs is a wrapping component that requires EuiTab components as direct children.
You control the displayed contents and current state through props on EuiTab like isSelected and onClick.
Use the prepend and append tab props to add content before and after the tab label respectively.
Tab sizes
EuiTabs allow a size prop. In general you should always use the default (medium) size. The small size is best
for when placing inside popovers or other small containers. Reserve using the large size for when using as primary
page navigation, like inside of EuiPageHeader.
You can also use the expand prop to evenly stretch each tab horizontally.
Bottom border
The bottomBorder helps to separate the tab group from the content below and is on by default.
However, some components like flyouts already provide borders which can act as the divider.
In this case you can turn the border off with bottomBorder={false}.
Tabbed content
EuiTabbedContent makes it easier to associate tabs with content based on the selected tab.
Use the initialSelectedTab prop to specify which tab to initially select.
Controlled tabbed content
You can also use the selectedTab and onTabClick props to take complete control over tab selection.
This can be useful if you want to change tabs based on user interaction with another part of the UI.