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 AnchorHTMLAttributes, ButtonHTMLAttributes


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

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop tabs#	Description and type Each tab needs id and content properties, so we can associate it with its panel for accessibility. The name property (a node) is also required to display to the user. Type: `EuiTabbedContentTab[]`	Default value Required
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 autoFocus#	Description and type When tabbing into the tabs, set the focus on `initial` for the first tab, or `selected` for the currently selected tab. Best use case is for inside of overlay content like popovers or flyouts. Type: `"initial" \| "selected"`	Default value `initial`
Prop expand#	Description and type Evenly stretches each tab to fill the horizontal space Type: `boolean`	Default value
Prop initialSelectedTab#	Description and type Use this prop to set the initially selected tab while letting the tabbed content component control selection state internally Type: `EuiTabbedContentTab`	Default value
Prop onTabClick#	Description and type Type: `(selectedTab: EuiTabbedContentTab) => void`	Default value
Prop selectedTab#	Description and type Use this prop if you want to control selection state within the owner component Type: `EuiTabbedContentTab`	Default value
Prop size#	Description and type Type: `"s" \| "m" \| "l" \| "xl"`	Default value

Tab sizes.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}

Bottom border

Tabbed content

Controlled tabbed content

Props

Tab sizes