Style Props

Feedback

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:

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

Use a design token from the Theme object by destructuring tokens from the useTheme hook (e.g., backgroundColor={tokens.colors.red[40]})

This method utilizes Amplify UI's theming capabilities, allowing for consistent design decisions as well as dynamic updates to the theme (e.g., light/dark mode).

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.primary[80]}
      color={tokens.colors.white}
    >
      Background Styling Example
    </Card>
  );
};

// use a design token name
export const BackgroundTokenNameExample = () => {
  return (
    <Card backgroundColor="primary.80" color="white">
      Background Styling Example
    </Card>
  );
};

Style Prop	CSS Property
backgroundColor	background-color
backgroundImage	background-image

Border Styles

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

// use any CSS value
export const BorderStylePropExample = () => {
  return (
    <Button
      borderRadius="0.5rem"
      borderStyle="dashed"
      borderColor="hsl(190, 70%, 70%)"
      borderWidth="medium"
    >
      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 Prop	CSS Property
border	border
borderStyle	border-style
borderRadius	border-radius
borderWidth	border-width
borderColor	border-color

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.primary[60]}
    >
      Color Styling Example
    </Alert>
  );
};

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

Style Prop	CSS Property
color	color
opacity	opacity

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 Prop	CSS Property
direction	flex-direction
wrap	flex-wrap
flex	flex
order	order
grow	flex-grow
justifyContent	justify-content
alignContent	align-content
alignItems	align-items
alignSelf	align-self
shrink	flex-shrink
basis	flex-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 Prop	CSS Property
autoColumns	grid-auto-columns
autoFlow	grid-auto-flow
autoRows	grid-auto-rows
templateAreas	grid-template-areas
templateColumns	grid-template-columns
templateRows	grid-template-rows
area	grid-area
column	grid-column
columnEnd	grid-column-end
columnSpan	grid-column
columnStart	grid-column-start
row	grid-row
rowEnd	grid-row-end
rowSpan	grid-row
rowStart	grid-row-start
gap	gap
columnGap	column-gap
rowGap	row-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 Prop	CSS Property
margin	margin
marginBlock	margin-block
marginBlockEnd	margin-block-end
marginBlockStart	margin-block-start
marginBottom	margin-block-end
marginInline	margin-inline
marginInlineEnd	margin-inline-end
marginInlineStart	margin-inline-start
marginLeft	margin-inline-start
marginRight	margin-inline-end
marginTop	margin-block-start
padding	padding
paddingBlock	padding-block
paddingBlockEnd	padding-block-end
paddingBlockStart	padding-block-start
paddingBottom	padding-block-end
paddingInline	padding-inline
paddingInlineEnd	padding-inline-end
paddingInlineStart	padding-inline-start
paddingLeft	padding-inline-start
paddingRight	padding-inline-end
paddingTop	padding-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 Prop	CSS Property
bottom	bottom
left	left
position	position
right	right
top	top

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.primary[60]}
      width={tokens.space.xxxl}
      height={tokens.space.xxxl}
    ></View>
  );
};

// use a design token name
export const SizeTokenNameExample = () => {
  return <View backgroundColor="primary.60" width="xxxl" height="xxxl"></View>;
};

Style Prop	CSS Property
height	height
maxHeight	max-height
maxWidth	max-width
minHeight	min-height
minWidth	min-width
width	width

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 Prop	CSS Property
boxShadow	box-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 Prop	CSS Property
fontFamily	font-family
fontSize	font-size
fontStyle	font-style
fontWeight	font-weight
letterSpacing	letter-spacing
lineHeight	line-height
textAlign	text-align
textDecoration	text-decoration
textTransform	text-transform
whiteSpace	white-space

Other Styles

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

Style Prop	CSS Property
aspectRatio	aspect-ratio
display	display
objectFit	object-fit
objectPosition	object-position
overflow	overflow
resize	resize
transform	transform
transformOrigin	transform-origin

Design Tokens

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