---
name: Spacers
route: /spacers/
---

import { Playground } from 'docz';
import { Vertical, Horizontal, StretchSpacer, VerticalSpacer, HorizontalSpacer } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Spacer

Spacers add *space* to your designs. Spacers should not be abused, but they can be super handy. Consider a simple button on the screen: 

<Playground>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Playground>  

Let's say the design wants you to add some space on top of the button. You can do that easily with `margin-top`: 

<Playground>
  <demos.Button style={{marginTop: '25px'}}>
    Just a button minding its own business
  </demos.Button>
</Playground>  

We've covered issues with using margin (specifically their collapsing nature and cross component dependencies, which makes them hard to manage and maintain reliably) in our [spacing-principle][principle-spacing]. Another issue is that `marginTop` can easily get lost in code reviews. 

If you have a parent container, then you should use `padding={top}` but even that can get lost in code reviews. So if you want to be super explict about significant space / or don't have easy access to the parent padding, you can use a simple `VerticalSpacer`, which shows up in code reviews:

<Playground>
  <VerticalSpacer space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Playground>  

## HorizontalSpacer
Takes the `space?:CSSLength` prop to generate a horizontal space. e.g. you can see the button pushed a bit to the right by a `HorizontalSpacer`: 

<Playground>
  <HorizontalSpacer space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Playground>  

## VerticalSpacer
Takes the `space?:CSSLength` prop to generate a vertical space. e.g. you can see the button pushed a bit to the bottom by a `VerticalSpacer`: 

<Playground>
  <VerticalSpacer space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Playground>  

## StretchSpacer 
Takes the `sizing?:number` prop ([stretch ratio concept covered in sizing principle][principle-sizing]) to generate a stretch amount of space.

`StretchSpacer` comes really handy when you want to split items to the sides (left & right) with a stretch space in between as shown below:

<Playground>
  <Horizontal>
    <demos.Button>
      On left
    </demos.Button>
    <StretchSpacer/>
    <demos.Button>
      On right
    </demos.Button>
  </Horizontal>
</Playground>

`StretchSpacer` works automatically for both horizontal and vertical dimensions depending on the parent container. The following two examples demonstrate it with `Vertical(StretchSpacer,Button)` and `Horizontal(StretchSpacer,Button)`: 

<Playground>
  <Vertical height={100}>
    <StretchSpacer/>
    <demos.Button>
      Just a button minding its own business
    </demos.Button>
  </Vertical>
</Playground>

<Playground>
  <Horizontal>
    <StretchSpacer/>
    <demos.Button>
      Just a button minding its own business
    </demos.Button>
  </Horizontal>
</Playground>

Note that when don't want to split items (all child items are grouped together), you can use the alignment properties on `Vertical`/`Horizontal` to achieve the same effect (no `StretchSpacer` in the below example):

<Playground>
  <Horizontal horizontalAlign='right'>
    <demos.Button>
      Just a button minding its own business
    </demos.Button>
  </Horizontal>
</Playground>

[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/