Tabs

Use tabs to organize related but unique content for a single idea or subject. Tabs show and hide content using in-page navigation UI.

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.

Props

EuiTabs

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop children#	Description and type ReactNode to render as this component's content Type: `ReactNode`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop expand#	Description and type Evenly stretches each tab to fill the horizontal space Type: `boolean`	Default value `false`
Prop bottomBorder#	Description and type Adds a bottom border to separate it from the content after Type: `boolean`	Default value `true`
Prop size#	Description and type Sizes affect both font size and overall size. Only use the `xl` size when displayed as page titles. Type: `"s" \| "m" \| "l" \| "xl"`	Default value `m`
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLDivElement>`	Default value

EuiTab

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop href#	Description and type Type: `string`	Default value
Prop isSelected#	Description and type Type: `boolean`	Default value
Prop disabled#	Description and type Type: `boolean`	Default value
Prop prepend#	Description and type Places content before the tab content/children. Will be excluded from interactive effects. Type: `ReactNode`	Default value
Prop append#	Description and type Places content after the tab content/children. Will be excluded from interactive effects. Type: `ReactNode`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop onClick#	Description and type Type: `MouseEventHandler<HTMLAnchorElement> \| MouseEventHandler<HTMLButtonElement>`	Default value

EuiTabbedContent