Sizes

Space

import { Grid, View, useTheme } from '@aws-amplify/ui-react'; export const SpaceExample = () => { const { tokens } = useTheme(); return ( <Grid gap={tokens.space.xxl} templateColumns="1fr 1fr"> <View padding={tokens.space.medium} backgroundColor={tokens.colors.neutral[20]} ></View> <View padding={tokens.space.medium} backgroundColor={tokens.colors.neutral[20]} ></View> </Grid> ); }; 

.custom-grid { gap: var(--amplify-space-xxl); } .custom-view { padding: var(--amplify-space-medium); } 

• zero
  --amplify-space-zero
  0
• xxxs
  --amplify-space-xxxs
  0.25rem
• xxs
  --amplify-space-xxs
  0.375rem
• xs
  --amplify-space-xs
  0.5rem
• small
  --amplify-space-small
  0.75rem
• medium
  --amplify-space-medium
  1rem
• large
  --amplify-space-large
  1.5rem
• xl
  --amplify-space-xl
  2.0rem
• xxl
  --amplify-space-xxl
  3.0rem
• xxxl
  --amplify-space-xxxl
  4.5rem
• relative.xxxs
  --amplify-space-relative-xxxs
  0.25em
• relative.xxs
  --amplify-space-relative-xxs
  0.375em
• relative.xs
  --amplify-space-relative-xs
  0.5em
• relative.small
  --amplify-space-relative-small
  0.75em
• relative.medium
  --amplify-space-relative-medium
  1em
• relative.large
  --amplify-space-relative-large
  1.5em
• relative.xl
  --amplify-space-relative-xl
  2.0em
• relative.xxl
  --amplify-space-relative-xxl
  3.0em
• relative.xxxl
  --amplify-space-relative-xxxl
  4.5em
• relative.full
  --amplify-space-relative-full
  100%

Border Widths

import { Button, useTheme, ThemeProvider } from '@aws-amplify/ui-react'; export const BorderWidthExample = () => { const { tokens } = useTheme(); const theme = { name: 'custom-theme', tokens: { components: { button: { borderWidth: tokens.borderWidths.large, }, }, }, }; return ( <ThemeProvider theme={theme}> <Button color={tokens.colors.secondary[60]}>Custom border button</Button> </ThemeProvider> ); }; 

.custom-button { border-width: var(--amplify-border-widths-large); } 

• small
  --amplify-border-widths-small
  1px
• medium
  --amplify-border-widths-medium
  2px
• large
  --amplify-border-widths-large
  3px

Radii

import { Card, useTheme } from '@aws-amplify/ui-react'; export const RadiiExample = () => { const { tokens } = useTheme(); return ( <Card borderRadius={tokens.radii.xxxl} backgroundColor={tokens.colors.green[10]} > Text </Card> ); }; 

.custom-card { border-radius: var(--amplify-radii-xxxl); } 

• xs
  --amplify-radii-xs
  0.125rem
• small
  --amplify-radii-small
  0.25rem
• medium
  --amplify-radii-medium
  0.5rem
• large
  --amplify-radii-large
  1rem
• xl
  --amplify-radii-xl
  2rem
• xxl
  --amplify-radii-xxl
  4rem
• xxxl
  --amplify-radii-xxxl
  8rem