Bottom bar

tip

EuiPageTemplate offers a quick way to apply a bottom bar to your page layouts.

EuiBottomBar is a simple wrapper component that does nothing but affix a dark bar (usually filled with buttons) to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state.

Like many of our other wrapper components, EuiBottomBar accepts a paddingSize prop, which can be set to s | m (default) | l | none.

Positions

Bottom bars default to a fixed position, in a portal at the bottom of the browser window. Alternatively, you can change the position to sticky where it will render in place but stick to the window only as the window edge nears. The static position reverts back to default DOM behavior.

You can also apply a different set of positioning locations just by adjusting them in with the top | right | bottom | left props.

Displacement

There is an affordForDisplacement prop (defaulting to true), which determines whether the component makes room for itself by adding bottom padding equivalent to its own height on the document <body> element. Setting this to false can be useful to minimize scrollbar visibility but will cause the bottom bar to overlap body content.

Props

EuiBottomBar

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 data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop usePortal#	Description and type Whether to wrap in an EuiPortal which appends the component to the body element. Only works if `position` is `fixed`. Type: `boolean \| EuiPortalProps`	Default value `true`
Prop affordForDisplacement#	Description and type Whether the component should apply padding on the document body element to afford for its own displacement height. Only works if `usePortal` is true and `position` is `fixed`. Type: `boolean`	Default value `true`
Prop position#	Description and type How to position the bottom bar against its parent. Type: `"fixed" \| "static" \| "sticky"`	Default value `fixed`
Prop paddingSize#	Description and type Padding applied to the bar. Default is 'm'. Type: `"s" \| "m" \| "l" \| "none"`	Default value `m`
Prop bodyClassName#	Description and type Optional class applied to the body element on mount. Type: `string`	Default value
Prop landmarkHeading#	Description and type Customize the screen reader heading that helps users find this control. Type: `string`	Default value `Page level controls`
Prop top#	Description and type Starting vertical position when `fixed` position. Offset from the top of the window when `sticky` position. Has no affect on `static` positions. Type: `Top<string \| number>`	Default value
Prop right#	Description and type Ending horizontal position when `fixed` position. Has no affect on `static` or `sticky` positions. Type: `Right<string \| number>`	Default value `0`
Prop bottom#	Description and type Starting vertical position when `fixed` position. Offset from the bottom of the window when `sticky` position. Has no affect on `static` positions. Type: `Bottom<string \| number>`	Default value `0`
Prop left#	Description and type Starting horizontal position when `fixed` position. Has no affect on `static` or `sticky` positions. Type: `Left<string \| number>`	Default value `0`
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<HTMLElement>`	Default value