SpacedGroup

SpacedGroups are great when you have variable width elements you want to uniformly space and wrap to the next line.

Horizontal spacing

Standard
Primary
Disabled
<SpacedGroup direction="vertical" xs={24}>
    <SpacedGroup>
      <Button variant="contained">Standard
      <Button variant="contained" type="primary">
        Primary
      </Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained">Standard</Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained">More Buttons</Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained">More Cowbell</Button>
    </SpacedGroup>
    <SpacedGroup>
      <div>Standard</div>
      <div>Primary</div>
      <div>Disabled</div>
    </SpacedGroup>
  </SpacedGroup>
</Playground>

Vertical spacing

Spacing can apply to any elements. The desire to have equal spacing among hetergeneous elements highlights why individual components should not "own" the spacing outside themselves (margin).

Standard
Primary
Disabled
Disabled
Standard
Primary
Disabled
Disabled
<SpacedGroup direction="vertical" xs={24}>
    <SpacedGroup direction="vertical">
      <Button variant="contained">Standard
      <Button variant="contained" type="primary">
        Primary
      </Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
    </SpacedGroup>
    <SpacedGroup direction="vertical">
      <div>Standard</div>
      <div>Primary</div>
      <div>Disabled</div>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <div>Disabled</div>
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <div>Standard</div>
      <div>Primary</div>
      <div>Disabled</div>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <div>Disabled</div>
    </SpacedGroup>
  </SpacedGroup>
</Playground>

Changing Screen Size

Standard
Primary
Disabled
<SpacedGroup direction="vertical" xs={0} sm={8} md={24}>
    <div>Standard
    <div>Primary</div>
    <div>Disabled</div>
  </SpacedGroup>
</Playground>

API

VersionOne Components v9.1.0