Blueprint

GuidesFoundationComponentsReleases
⌘K

Breakpoints

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.

NameAliasValue
base—
width100320px
width200mobile375px
width250480px
width300tablet834px
width350992px
width400desktop1152px
width5001440px

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={iMaximize2} />
</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>