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