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 it from the theme in a custom component.

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

xxxLarge
xxLarge
xLarge
large
medium
small
xSmall
xxSmall
none