Components
Inputs
Page Elements
Filters
Feedback

Spacing

Spacing is used to consistently apply margin and padding across components and page layouts. Having a set spacing scale brings a rhythm to the product and creates a natural and familiar flow from page to page.

Spacing Options

Spacing tokens can be applied to both padding and margins across components and page layouts.

PropTypeDefaultNotes
top
object
N/A
Determines the top spacing. Contains key: value pairs for xSmall, small, medium, large and xLarge resolutions that take slim, cozy, moderate and other sizes
bottom
object
N/A
Determines the bottom spacing. Contains key: value pairs for xSmall, small, medium, large and xLarge resolutions that take slim, cozy, moderate and other sizes
children
node
N/A
Required prop

Slim

4px
Code
<Spacing top={{"xSmall":"slim"}} />

Moderate

16px
Code
<Spacing top={{"xSmall":"moderate"}} />

Normal

24px
Code
<Spacing top={{"xSmall":"normal"}} />

Comfy

32px
Code
<Spacing top={{"xSmall":"comfy"}} />

Spacious

48px
Code
<Spacing top={{"xSmall":"spacious"}} />

Giant

64px
Code
<Spacing top={{"xSmall":"giant"}} />

Colossal

88px
Code
<Spacing top={{"xSmall":"colossal"}} />