Breakpoints

Define your breakpoints in the breakpoints object. Add as many breakpoints as you need.

export const { styled, css } = createStyled({
  breakpoints: {
    bp1: (rule) => `@media (min-width: 640px) { ${rule} }`,
    bp2: (rule) => `@media (min-width: 768px) { ${rule} }`,
    bp3: (rule) => `@media (min-width: 1024px) { ${rule} }`,
    bp4: (rule) => `@media (min-width: 1280px) { ${rule} }`,
  },
});

Note: Choose whichever naming convention you prefer. We recommend either

bp1

,

bp2

,

bp3

,

bp4

etc. or

sm

,

md

,

lg

,

xl

etc.

Responsive variants

Once configured, you can apply different variants at different breakpoints. You must use the

breakpoint to declare the initial variant before any breakpoints are applied.

In the example below, we apply coral initially, then the purple color variant at the bp2 breakpoint, and the tomato color variant at the bp3 breakpoint.

const Button = styled('button', {
  alignItems: 'center',
  backgroundColor: 'royalblue',
  border: 'none',
  borderRadius: '9999px',
  color: 'white',
  display: 'inline-flex',
  fontWeight: 500,
  lineHeight: '1',
  height: '$5',
  paddingLeft: '10px',
  paddingRight: '10px',

  variants: {
    color: {
      coral: {
        backgroundColor: 'coral',
      },
      purple: {
        backgroundColor: 'purple',
      },
      tomato: {
        backgroundColor: 'tomato',
      },
    },
  },
});

render(
  <Button color={{ initial: 'coral', bp2: 'purple', bp3: 'tomato' }}>Responsive button</Button>
);

Note: If you're using TypeScript, your variants will be typed.

Using breakpoints in the style objects

const Button = styled('button', {
  height: '35px'

  // apply styles to the `bp1` breakpoint
  bp1: {
    height: '45px'
  }
});

Note: In most cases, we do not recommend applying responsive breakpoints inline. Ideally, your component styles should be immutable.