Cluster

Use a Cluster when you want to group inline elements closely together without having to worry about margin and wrapping behavior. Cluster elements have margin between them but no “left over” margin around them.

<div class="ds-cluster">
  <div>
    <button class="ds-button ds-button-blue">Cancel</button>
    <button class="ds-button">Confirm</button>
  </div>
</div>

<div class="ds-cluster-center">
  <div>
    <button class="ds-button ds-button-blue">Cancel</button>
    <button class="ds-button">Confirm</button>
  </div>
</div>

<div class="ds-cluster-right">
  <div>
    <button class="ds-button ds-button-blue">Cancel</button>
    <button class="ds-button">Confirm</button>
  </div>
</div>

Tighter clustering

You can reduce the space/margin between Cluster elements by using the ds-cluster-tight class in addition to your chosen Cluster class. For example, a tightly clustered, right-justified example would be attributed like this:

<div class="ds-cluster-right ds-cluster-tight">
  <!-- cluster innards -->
</div>