Breakpoint utilities

Screen sizes

The sizing options correlate with the keys in

euiTheme.breakpoint. The named breakpoint starts at the pixel value provided and ends before the next one.

✄𐘗
tsx code block:
✄𐘗'xl': 1200, // and up
'l': 992, // to 1199
'm': 768, // to 991
's': 575, // to 767
'xs': 0, // to 574

Show for

The EuiShowFor wrapping utility component will not render its children unless the window width matches the range of one of the named breakpoints provided to the sizes prop.

Loading...

Hide for

The EuiHideFor wrapping utility component will not render its children while the window width matches the range of one of the named breakpoints provided to the sizes prop.

Loading...

Responsive classes

Similar to the wrapping components, these classes will hide or show the element based on the current current width matching the range of the declared size. However, they simply utilize the display property which means they will still render in the DOM.

.eui-showFor--[size] className

Shows the element only for the specified breakpoint by applying display: none; for all, then applying display: inline; when within the breakpoint size. The element will still render and exist in the DOM.

.eui-showFor--xs

.eui-showFor--s

.eui-showFor--m

.eui-showFor--l

.eui-showFor--xl

✄𐘗
tsx code block:
✄𐘗<span className="eui-showFor--xs">
  {/* Your content */}
</span>

.eui-showFor--[size]--[display] className

The eui-showFor--[size] classes will force display of inline when showing the element. You can modify this display property by appending one of the following display properties block, inlineBlock, or flex.

spanspanspan

✄𐘗
tsx code block:
✄𐘗<span className="eui-showFor--xs--flex">
  {/* Your content */}
</span>

.eui-hideFor--[size] className

Hides the element for the specified breakpoint size with display: none;. The element will still render and exist in the DOM.

.eui-hideFor--xs

.eui-hideFor--s

.eui-hideFor--m

.eui-hideFor--l

.eui-hideFor--xl

✄𐘗
tsx code block:
✄𐘗<span className="eui-hideFor--xs">
  {/* Your content */}
</span>

Props

EuiShowFor

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop children# ↦	Description and type Required otherwise nothing ever gets returned Type: ReactNode ↦	Default value Required ↵
Prop sizes# ↦	Description and type List of all the responsive sizes to show the children for. Array of #EuiBreakpointSize Type: string[] | "none" | "all" ↦	Default value Required ↵

𐘂𐘂

EuiHideFor

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop children# ↦	Description and type Required otherwise nothing ever gets returned Type: ReactNode ↦	Default value Required ↵
Prop sizes# ↦	Description and type List of all the responsive sizes to hide the children for. Array of #EuiBreakpointSize Type: string[] | "none" | "all" ↦	Default value Required ↵

𐘂𐘂