Sizes

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

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

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