Breakpoints

For most of your usages we recommend using the

responsive utilities instead of consuming the theme values directly.

Default values

If you want to align your custom responsive styles with EUI's breakpoints, or when using components that accept our named breakpoints, you'll want to utilize the following default values and provided hooks.

useCurrentEuiBreakpoint() hook

This hook returns the named breakpoint size of the current browser window width, responsively updating whenever the window is resized.

The hook automatically inherits breakpoint sizes from the current EUI theme and any theme overrides.

Current breakpoint:

✄𐘗
tsx code block:
✄𐘗const currentBreakpoint = useCurrentEuiBreakpoint()

useIsWithinBreakpoints(sizes[], isResponsive?) hook

This hook returns true or false if the current browser window width is within the passed breakpoint sizes. The isResponsive parameter allows it to easily be turned on/off from within your component.

You can also use useIsWithinMaxBreakpoint(size) and useIsWithinMinBreakpoint(size). The min/max hooks return true or false if the current browser window width is above or below the passed breakpoint size respectively.

These hooks automatically inherits breakpoint sizes from the current EUI theme and any theme overrides.

Targeting large devices only:

Targeting medium devices and below:

Targeting small devices and above:

✄𐘗
tsx code block:
✄𐘗useIsWithinBreakpoints(['l', 'xl'])
useIsWithinMaxBreakpoint('m')
useIsWithinMinBreakpoint('s')

useEuiBreakpoint(sizes[]) hook

Given an array of screen sizes, this hook generates a CSS media query string based on the minimum and maximum screen sizes provided.

This text is bold on small to large screens, red on small and below screens, yellow on medium screens, and green on large and above screens.

✄𐘗
tsx code block:
✄𐘗${useEuiBreakpoint(['s', 'l'])} {
  font-weight: bold;
}
${useEuiBreakpoint(['xs', 's'])} {
  color: red;
}
${useEuiBreakpoint(['m'])} {
  color: yellow;
}
${useEuiBreakpoint(['l', 'xl'])} {
  color: green;
}

useEuiMaxBreakpoint(size) and useEuiMinBreakpoint(size) hook

Given a single breakpoint key, these hooks generate a min or max CSS media query string based on the single breakpoint dimension returned.

This text is red on screens below the medium breakpoint, and green on screens above.

✄𐘗
tsx code block:
✄𐘗css`
  ${useEuiMaxBreakpoint('m')} {
    color: red;
  }
  ${useEuiMinBreakpoint('m')} {
    color: green;
  }
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
breakpoint.xs ↦	breakpoint.xs ↦	Value 0 ↵
breakpoint.s ↦	breakpoint.s ↦	Value 575 ↵
breakpoint.m ↦	breakpoint.m ↦	Value 768 ↵
breakpoint.l ↦	breakpoint.l ↦	Value 992 ↵
breakpoint.xl ↦	breakpoint.xl ↦	Value 1200 ↵

𐘂𐘂

Custom values

EUI's theme breakpoints can be overridden and extended. However, the default sizes (xl through xs) will always be present and cannot be removed.

EuiProvider theme

Theme breakpoints can be overridden or added via EuiProvider's or EuiThemeProvider's modify prop.

Excluding a default breakpoint key in your breakpoint override will use the EUI default value for that size as a fallback.

Current custom breakpoint:

✄𐘗
tsx code block:
✄𐘗<EuiThemeProvider
  modify={{
    breakpoint: {
      xxs: 0,
      xs: 250,
      s: 500,
      m: 1000,
      l: 1500,
      xl: 2000,
      xxl: 2500,
    },
  }}
>
  <App />
</EuiThemeProvider>

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
breakpoint.xxs ↦	breakpoint.xxs ↦	Value 0 ↵
breakpoint.xs ↦	breakpoint.xs ↦	Value 250 ↵
breakpoint.s ↦	breakpoint.s ↦	Value 500 ↵
breakpoint.m ↦	breakpoint.m ↦	Value 1000 ↵
breakpoint.l ↦	breakpoint.l ↦	Value 1500 ↵
breakpoint.xl ↦	breakpoint.xl ↦	Value 2000 ↵
breakpoint.xxl ↦	breakpoint.xxl ↦	Value 2500 ↵

𐘂𐘂