Amplify UI

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>;

Hello

there!

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>

Hello

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>;
};

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.