Breakpoints

React

A set of breakpoint presets are available to build responsive interfaces. Using Chakra's Responsive Styles feature, it's possible to generate media queries automatically by simply passing a responsive value to any prop that supports responsive styles.

Name	Alias	Value
base		—
width100		320px
width200	mobile	375px
width250		480px
width275		600px
width300	tablet	834px
width350		992px
width400	desktop	1200px
width500		1440px
width600		1800px

Responsive Props

All style props are responsive by default.

Object Style

live

function Example() {
  const Responsive = props => <Panel as={Center} w="500" h="200" {...props} />;
  return (
    <Stack direction="row">
      {/* Use `base` to set a baseline value */}
      <Responsive bg={{ base: 'primary.600', desktop: 'brandGreen.500' }} />
      {/* The aliased breakpoints are often sufficient */}
      <Responsive
        bg={{
          base: 'primary.600',
          tablet: 'brandOrange.500',
          desktop: 'brandGreen.500',
        }}
      />
      {/* Use all breakpoints for more control */}
      <Responsive
        bg={{
          base: 'primary.600',
          width100: 'brandTan.600',
          mobile: 'brandNavy.500',
          tablet: 'brandOrange.500',
          desktop: 'brandGreen.500',
          width500: 'brandBrown.500',
        }}
      />
    </Stack>
  );
}

Array Style

Prefer Object Style
Using arrays for responsive props is discouraged as it is hard to read and requires every breakpoint in the desired responsive range to be specified.

Interstitial breakpoints must be filled with null.

live

function Example() {
  const Responsive = props => <Panel as={Center} w="500" h="200" {...props} />;
  return (
    <Responsive
      bg={[
        'primary.600', // base
        null, // width100
        null, // width200
        'brandOrange.500', // mobile
        null, // width250
        null, // width300
        null, // tablet
        'brandGreen.500', // width350
        'brandBrown.500', // desktop+
      ]}
    />
  );
}

It does allow you to do something silly like this if you need to, though...

live

function Example() {
  const theme = useTheme();
  const Responsive = props => (
    <Panel as={Center} display="inline-block" {...props} />
  );
  return (
    <Responsive
      bg="primary.600"
      paddingX={Object.keys(theme.space)
        .map(size => parseInt(size))
        .filter(size => size % 100 === 0 && size >= 100)
        .sort((a, b) => a - b)
        .map(String)}
    >
      <Icon color="neutral.0" icon={iconExpand} />
    </Responsive>
  );
}

Responsive Presets

The size and variant theme presets support responsive values as well. If you need to make something like colorScheme responsive, you'll need to use useBreakpointValue.

Note
Because size and variant presets are applied with media queries, you may need to append !important in order to override size and styles that are applied responsively.

live

<Stack direction="column" alignItems="start" spacing="500">
  <Heading
    size={{ base: 400, tablet: 500, desktop: 600 }}
    marginBottom="0 !important"
  >
    Heading Size
  </Heading>
  <Button size={{ base: 'small', tablet: 'medium', desktop: 'large' }}>
    Button Size
  </Button>
  <Badge variant={{ base: 'brand', tablet: 'solid' }}>Badge Variant</Badge>
</Stack>

Bootstrap

Bootstrap incorporates responsive breakpoints into its various utility classes. See the spacing notation for an example.

Default Bootstrap Breakpoints
The default Bootstrap breakpoints such as sm, md, lg, etc. are still supported, but they are deprecated and mapped to the closest breakpoint in the system tokens. They will be removed entirely in the next major release.

live

<div class="example-space d-flex gap-100 gap-tablet-500 gap-desktop-800">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Design System

Settings

Breakpoints

React

Responsive Props

Object Style

Array Style

Prefer Object Style

Responsive Presets

Note

Bootstrap

Default Bootstrap Breakpoints