Spacing

Spacing can be used directly on certain properties that expect a size value, like Margin and Padding.

Edit the code below to see your changes live!

<>
  <Button marginRight="medium">Button</Button>
  <Button>Button</Button>
</>

<>
  <Button marginRight="medium">Button</Button>
  <Button>Button</Button>
</>

You can also use spacing directly from the theme to style other components, for example:

Edit the code below to see your changes live!

function Example() {
  const StyledBox = styled(Box)(({ theme }) => ({
    backgroundColor: theme.colors.primary,
    height: theme.spacing.large,
    width: theme.spacing.large,
  }));

  return <StyledBox />;
}

function Example() {
  const StyledBox = styled(Box)(({ theme }) => ({
    backgroundColor: theme.colors.primary,
    height: theme.spacing.large,
    width: theme.spacing.large,
  }));
  return <StyledBox />;
}

Available Spacing

xxxLarge

xxLarge

xLarge

large

medium

small

xSmall

xxSmall

none

Beta