Spacing

Overview

BigDesign core theme provides a pre-defined set of spacing values that are primarily used with any of the padding and margin props. There are a few ways we can consume these values.

When to use:

  • Using the Margin and Padding props.
  • Consuming spacing from the theme in custom components.
  • Using negative spacing tokens (e.g. xSmallN) for controlled overlap or gutter adjustments.

Implementation

Certain components will include padding and margin props. You can use the spacing keys to apply spacing values to those props.

Edit the code below to see your changes live!

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

Spacing values

The grid below shows the positive spacing tokens. To use the same tokens for negative spacing, just append an N (e.g. mediumN).

xxxLarge
xxLarge
xLarge
large
medium
small
xSmall
xxSmall
none