Responsive Design

Responsive styling is supported out of the box using our default breakpoints. Our responsive support uses a mobile first approach, so @media(min-width) rules are used for all breakpoints.

Breakpoints

{
  base: '0',
  small: '480px',
  medium: '768px',
  large: '992px',
  xl: '1280px',
  xxl: '1536px',
}

Code

Example

Import any of our primitives and use either the object or array syntax to changes styles responsively. Resize your browser window window to see the styles change.

import { Flex, View } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

<Flex direction={{ base: 'column', large: 'row' }}>
  <View width="100%" backgroundColor={{ base: 'orange', large: 'yellow' }}>
    Hello
  </View>
  <View width="100%" backgroundColor={['orange', 'orange', 'orange', 'yellow']}>
    there!
  </View>
</Flex>;

Object Syntax

When using the object syntax, you can specify a style for multiple viewpoint ranges. The example below shows setting a style of orange from base (0em) through small, and yellow from medium (48em) upwards.

// View will be orange from 0 to 47em, then change to yellow from 48em upwards.
<View backgroundColor={{ base: 'orange', medium: 'yellow' }} />

Or you can use the object syntax to specify styling for each breakpoint individually

// View background color and text color will change at each breakpoint
<View
  color={{
    base: 'black',
    small: 'black',
    medium: 'black',
    large: 'white',
    xl: 'white',
    xxl: 'white',
  }}
  backgroundColor={{
    base: 'red',
    small: 'orange',
    medium: 'yellow',
    large: 'green',
    xl: 'blue',
    xxl: 'purple',
  }}
>
  Hello
</View>

Array syntax

When using the array syntax, specify each breakpoint styling in order from base up to xxl. If only a few styles are specified, all the breakpoints above will have the same style.

  <Text
    as="span"
    fontSize={['1rem', '2rem', '3rem', '4rem', '5rem', '6rem']}
    lineHeight="normal"
  >
    {' 🐈 '}
  </Text>
  <Text as="span" fontSize={['1rem', '2rem', '3rem']} lineHeight="normal">
    {' 🐕 '}
  </Text>

useBreakpointValue

A responsive design can be achieved for all properties using the useBreakpointValue hook. The hook will accept the object or array syntax and return the value of the current breakpoint.

import {
  Alert,
  AlertVariations,
  useBreakpointValue,
} from '@aws-amplify/ui-react';

export const UseBreakpointValueObjectExample = () => {
  const variation = useBreakpointValue({
    base: 'info',
    small: 'warning',
    medium: 'error',
    large: 'success',
  }) as AlertVariations;

  return <Alert variation={variation}>Responsive Alert</Alert>;
};

import {
  Alert,
  AlertVariations,
  useBreakpointValue,
} from '@aws-amplify/ui-react';

export const UseBreakpointValueArrayExample = () => {
  const variation = useBreakpointValue([
    'info',
    'warning',
    'error',
    'success',
  ]) as AlertVariations;

  return <Alert variation={variation}>Responsive Alert</Alert>;
};