Breakpoints

Overview

Wave provides a set of breakpoints to maintain a consistent set of conditions when designing responsive experiences.

A breakpoint is a condition that results from a CSS media query​. Media queries are used to query specific characteristics of the displaying device or environment, such as viewport width. Wave breakpoints are based on the width specific media queries.

Available tokens#

Usage#

To make responsive styling easier, breakpoints can be targeted through component props, such as responsive props on Flex or Grid components. These props accept an object as value for mobile-first responsive styles.

To find out more about how you use responsive design with layout, see Grid documentation.

You can also use these breakpoints in styled() or css by prefixing the key with @, e.g. @mqLargeAndUp to create mobile-first responsive styles. Check out the Stitches documentation​ to learn more.

import { styled } from '@volue/wave-react';

const Section = styled('section', {
  padding: '$spacingM',
  '@mqLargeAndUp': { padding: '$spacingXl' }
});

import { Box } from '@volue/wave-react';

<Box
  css={{
    color: '$foregroundNeutralSubtle',
    '@mqMediumAndUp': { color: '$foregroundNeutral' },
    '@mqXlargeAndUp': { color: '$foregroundAccentModerate' }
  }}
>
  Hello World
</Box>;