Amplify UI

Sizes

Amplify UI uses design tokens for consistent spacing, border radius, widths, etc.

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

Text
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

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.