Amplify UI Home

Style Props

These style props are available on Amplify UI primitive components and can be used to modify the corresponding styles. This allows users to quickly make style adjustments without having to go through CSS or add a theme object. Style props override any conflicting CSS style sheet or theme styling.

There are three ways of passing style props to a component:

  1. Pass any valid CSS property directly (e.g., backgroundColor="red")
  • This is useful for rapid prototyping or styling a component which differs from the main theme
  1. Use a design token from the Theme object by destructuring tokens from the useTheme hook (e.g., backgroundColor={tokens.colors.red[40]})
  1. Use the shorthand syntax to reference design tokens without using the useTheme hook (e.g., backgroundColor="red.40")
  • This is a convenient shorthand for method 2. However, not all design tokens have a shorthand mapping.

Background Styles

Background Styling Example
import { Card, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const BackgroundStylePropExample = () => {
  return (
    <Card backgroundColor="hsl(190, 95%, 30%)" color="#fff">
      Background Styling Example
    </Card>
  );
};

// use a design token from the theme object
export const BackgroundThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Card
      backgroundColor={tokens.colors.brand.primary[80]}
      color={tokens.colors.white}
    >
      Background Styling Example
    </Card>
  );
};

// use a design token name
export const BackgroundTokenNameExample = () => {
  return (
    <Card backgroundColor="brand.primary.80" color="white">
      Background Styling Example
    </Card>
  );
};
Style PropCSS Property
backgroundColorbackground-color
backgroundImagebackground-image

Border Styles

import { Button, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const BorderStylePropExample = () => {
  return <Button borderRadius="0.5rem">Border Styling Example</Button>;
};

// use a design token from the theme object
export const BorderThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Button borderRadius={tokens.radii.medium}>Border Styling Example</Button>
  );
};

// use a design token name
export const BorderTokenNameExample = () => {
  return <Button borderRadius="medium">Border Styling Example</Button>;
};
Style PropCSS Property
borderborder
borderRadiusborder-radius

Color Styles

Color Styling Example
import { Alert, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const ColorStylePropExample = () => {
  return (
    <Alert backgroundColor="#fff" color="hsl(190, 50%, 50%)">
      Color Styling Example
    </Alert>
  );
};

// use a design token from the theme object
export const ColorThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Alert
      backgroundColor={tokens.colors.white}
      color={tokens.colors.brand.primary[60]}
    >
      Color Styling Example
    </Alert>
  );
};

// use a design token name
export const ColorTokenNameExample = () => {
  return (
    <Alert backgroundColor="white" color="brand.primary.60">
      Color Styling Example
    </Alert>
  );
};
Style PropCSS Property
colorcolor
opacityopacity

Flex

import { Button, Flex } from '@aws-amplify/ui-react';

// use any CSS value
export const FlexStylePropExample = () => {
  return (
    <Flex direction="column" wrap="wrap" alignItems="flex-start">
      <Button order="3">Button 1</Button>
      <Button order="1">Button 2</Button>
      <Button order="2">Button 3</Button>
    </Flex>
  );
};
Style PropCSS Property
directionflex-direction
wrapflex-wrap
flexflex
orderorder
growflex-grow
justifyContentjustify-content
alignContentalign-content
alignItemsalign-items
alignSelfalign-self
shrinkflex-shrink
basisflex-basis

Grid

import { Grid, Button } from '@aws-amplify/ui-react';

// use any CSS value
export const GridStylePropExample = () => {
  return (
    <Grid templateColumns="100px 100px 100px" gap="1rem">
      <Button column="1/3" row="1">
        A
      </Button>
      <Button column="3" row="1/3">
        B
      </Button>
      <Button column="1" row="2">
        C
      </Button>
      <Button column="2" row="2">
        D
      </Button>
    </Grid>
  );
};
Style PropCSS Property
autoColumnsgrid-auto-columns
autoFlowgrid-auto-flow
autoRowsgrid-auto-rows
templateAreasgrid-template-areas
templateColumnsgrid-template-columns
templateRowsgrid-template-rows
areagrid-area
columngrid-column
columnEndgrid-column-end
columnSpangrid-column
columnStartgrid-column-start
rowgrid-row
rowEndgrid-row-end
rowSpangrid-row
rowStartgrid-row-start
gapgap
columnGapcolumn-gap
rowGaprow-gap

Margin and Padding

import { Button, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const MarginAndPaddingStylePropExample = () => {
  return (
    <Button padding="1rem" margin="1rem">
      Margin and Padding Styling Example
    </Button>
  );
};

// use a design token from the theme object
export const MarginAndPaddingThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Button padding={tokens.space.large} margin={tokens.space.large}>
      Margin and Padding Styling Example
    </Button>
  );
};

// use a design token name
export const MarginAndPaddingTokenNameExample = () => {
  return (
    <Button padding="large" margin="large">
      Margin and Padding Styling Example
    </Button>
  );
};
Style PropCSS Property
marginmargin
marginBlockmargin-block
marginBlockEndmargin-block-end
marginBlockStartmargin-block-start
marginBottommargin-block-end
marginInlinemargin-inline
marginInlineEndmargin-inline-end
marginInlineStartmargin-inline-start
marginLeftmargin-inline-start
marginRightmargin-inline-end
marginTopmargin-block-start
paddingpadding
paddingBlockpadding-block
paddingBlockEndpadding-block-end
paddingBlockStartpadding-block-start
paddingBottompadding-block-end
paddingInlinepadding-inline
paddingInlineEndpadding-inline-end
paddingInlineStartpadding-inline-start
paddingLeftpadding-inline-start
paddingRightpadding-inline-end
paddingToppadding-block-start

Position Styles

import { Button, View, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const PositionStylePropExample = () => {
  return (
    <View
      position="relative"
      width="100%"
      height="4.5rem"
      border="1px solid hsl(210, 8%, 55%)"
    >
      <Button position="absolute" right="0.5rem" top="0.5rem">
        Position Styling Example
      </Button>
    </View>
  );
};

// use a design token from the theme object
export const PositionThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <View
      position="relative"
      width={tokens.space.relative.full}
      height={tokens.space.xxxl}
      border={`1px solid ${tokens.colors.border.primary}`}
    >
      <Button position="absolute" right={tokens.space.xs} top={tokens.space.xs}>
        Position Styling Example
      </Button>
    </View>
  );
};

// use a design token name
export const PositionTokenNameExample = () => {
  return (
    <View
      position="relative"
      width="relative.full"
      height="xxxl"
      border="1px solid hsl(210, 8%, 55%)"
    >
      <Button position="absolute" right="xs" top="xs">
        Position Styling Example
      </Button>
    </View>
  );
};
Style PropCSS Property
bottombottom
leftleft
positionposition
rightright
toptop

Size Styles

import { Card, View, Text, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const SizeStylePropExample = () => {
  return (
    <View
      backgroundColor="hsl(190, 50%, 50%)"
      width="4.5rem"
      height="4.5rem"
    ></View>
  );
};

// use a design token from the theme object
export const SizeThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <View
      backgroundColor={tokens.colors.brand.primary[60]}
      width={tokens.space.xxxl}
      height={tokens.space.xxxl}
    ></View>
  );
};

// use a design token name
export const SizeTokenNameExample = () => {
  return (
    <View backgroundColor="brand.primary.60" width="xxxl" height="xxxl"></View>
  );
};
Style PropCSS Property
heightheight
maxHeightmax-height
maxWidthmax-width
minHeightmin-height
minWidthmin-width
widthwidth

Shadow Styles

import { Button, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const ShadowStylePropExample = () => {
  return (
    <Button boxShadow="rgba(13, 26, 38, 0.25) 0px 4px 12px 0px">
      Shadow Styling Example
    </Button>
  );
};

// use a design token from the theme object
export const ShadowThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Button boxShadow={tokens.shadows.large}>Shadow Styling Example</Button>
  );
};

// use a design token name
export const ShadowTokenNameExample = () => {
  return <Button boxShadow="large">Shadow Styling Example</Button>;
};
Style PropCSS Property
boxShadowbox-shadow

Typography Styles

Typography Styling Example

import { Text, useTheme } from '@aws-amplify/ui-react';

// use any CSS value
export const TypographyStylePropExample = () => {
  return (
    <Text fontSize="2rem" fontWeight="600" lineHeight="1.5">
      Typography Styling Example
    </Text>
  );
};

// use a design token from the theme object
export const TypographyThemeTokenExample = () => {
  const { tokens } = useTheme();
  return (
    <Text
      fontSize={tokens.fontSizes.xxl}
      fontWeight={tokens.fontWeights.semibold}
      lineHeight={tokens.lineHeights.medium}
    >
      Typography Styling Example
    </Text>
  );
};

// use a design token name
export const TypographyTokenNameExample = () => {
  return (
    <Text fontSize="xxl" fontWeight="semibold" lineHeight="medium">
      Typography Styling Example
    </Text>
  );
};
Style PropCSS Property
fontFamilyfont-family
fontSizefont-size
fontStylefont-style
fontWeightfont-weight
letterSpacingletter-spacing
lineHeightline-height
textAligntext-align
textDecorationtext-decoration
textTransformtext-transform
whiteSpacewhite-space

Other Styles

Below is a list of other style properties accepted by Amplify UI primitives.

Style PropCSS Property
displaydisplay
objectFitobject-fit
objectPositionobject-position
overflowoverflow
resizeresize
transformtransform
transformOrigintransform-origin

Design Tokens

For a list of all available design tokens and their associated values please see colors, typography, and sizes

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

© 2022 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.