Space

Usage

Use the <Space /> component to provide consistent spacing between children.

Basic

Live Editor

<Space> <div><Button variant="outline">Info</Button></div> <div><Button variant="outline">Cancel</Button></div> <div><Button variant="outline">Submit</Button></div> </Space>

  <Space>
    <div><Button variant="outline">Info</Button></div>
    <div><Button variant="outline">Cancel</Button></div>
    <div><Button variant="outline">Submit</Button></div>
  </Space>

Result

Loading...

Custom Gap

Live Editor

<Space size={4}> <div><Button variant="outline">Info</Button></div> <div><Button variant="outline">Cancel</Button></div> <div><Button variant="outline">Submit</Button></div> </Space>

  <Space size={4}>
    <div><Button variant="outline">Info</Button></div>
    <div><Button variant="outline">Cancel</Button></div>
    <div><Button variant="outline">Submit</Button></div>
  </Space>

Result

Loading...

Vertical

Live Editor

<Space vertical> <div><Button variant="outline">Info</Button></div> <div><Button variant="outline">Cancel</Button></div> <div><Button variant="outline">Submit</Button></div> </Space>

  <Space vertical>
    <div><Button variant="outline">Info</Button></div>
    <div><Button variant="outline">Cancel</Button></div>
    <div><Button variant="outline">Submit</Button></div>
  </Space>

Result

Loading...

Customized Gap Size

Live Editor

<Space vertical size='4'> <div><Button variant="outline">Info</Button></div> <div><Button variant="outline">Cancel</Button></div> <div><Button variant="outline">Submit</Button></div> </Space>

  <Space vertical size='4'>
    <div><Button variant="outline">Info</Button></div>
    <div><Button variant="outline">Cancel</Button></div>
    <div><Button variant="outline">Submit</Button></div>
  </Space>

Result

Loading...