Spacers

Spacers add space to your designs. Spacers should not be abused, but they can be super handy.

margin has its issues covered in the space principle and padding can get lost in code reviews. So, if you want to be super explict about significant space, you can use a simple VSpace, which shows up in code reviews:

Live Editor

<div style={{background: 'gold'}}> <VSpace $space={25}/> <demos.Button> Just a button minding its own business </demos.Button> </div>

<div style={{background: 'gold'}}>
  <VSpace $space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</div>

Result

Loading...

HSpace

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 HSpace:

Live Editor

<div style={{background: 'gold'}}> <HSpace $space={25}/> <demos.Button> Just a button minding its own business </demos.Button> </div>

<div style={{background: 'gold'}}>
  <HSpace $space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</div>

Result

Loading...

VSpace

Takes the $space?:CSSLength prop to generate a vertical space. e.g. you can see the button pushed a bit down by a VSpace:

Live Editor

<div style={{background: 'gold'}}> <VSpace $space={25}/> <demos.Button> Just a button minding its own business </demos.Button> </div>

<div style={{background: 'gold'}}>
  <VSpace $space={25}/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</div>

Result

Loading...

Stretch

Takes the $scale?:number prop (concept covered in scale principle) to generate a stretch amount of space.

info

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

Live Editor

<Row> <demos.Button> On left 1 </demos.Button> <demos.Button> On left 2 </demos.Button> <Stretch /> <demos.Button> On right </demos.Button> </Row>

<Row>
  <demos.Button>
    On left 1
  </demos.Button>
  <demos.Button>
    On left 2
  </demos.Button>
  <Stretch />
  <demos.Button>
    On right
  </demos.Button>
</Row>

Result

Loading...

tip

Stretch works automatically for both horizontal and vertical dimensions depending on the parent container. The following two examples demonstrate it with Column(Stretch,Button) and Row(Stretch,Button):

Live Editor

<Column height={100} style={{background: 'gold'}}> <Stretch/> <demos.Button> Just a button minding its own business </demos.Button> </Column>

<Column height={100} style={{background: 'gold'}}>
  <Stretch/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Column>

Result

Loading...

Live Editor

<Row style={{background: 'gold'}}> <Stretch/> <demos.Button> Just a button minding its own business </demos.Button> </Row>

<Row style={{background: 'gold'}}>
  <Stretch/>
  <demos.Button>
    Just a button minding its own business
  </demos.Button>
</Row>

Result

Loading...

note

Note that when all items you want to shift are grouped together, you can achieve the same effect by using alignment properties (without using a Stretch):

Live Editor

<Row $hAlign='end' style={{background: 'gold'}}> <demos.Button> On Right 1 </demos.Button> <demos.Button> On Right 2 </demos.Button> </Row>

<Row $hAlign='end' style={{background: 'gold'}}>
  <demos.Button>
    On Right 1
  </demos.Button>
  <demos.Button>
    On Right 2
  </demos.Button>
</Row>

Result

Loading...