Horizontal Layout

<cc-horizontal-layout>
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>

Spacing

<cc-horizontal-layout spacing="small">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<cc-horizontal-layout spacing="medium">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<!-- default to standard -->
<cc-horizontal-layout spacing="standard">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>
<br />
<cc-horizontal-layout spacing="large">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>

Custom Spacing

<cc-horizontal-layout style="--gap: 3rem;">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>

Items Expanding

<cc-horizontal-layout>
  <cc-button>Cancel</cc-button>
  <cc-button>Reset</cc-button>
  <cc-button theme="primary" style="flex-grow: 1;">Save</cc-button>
</cc-horizontal-layout>

Padding

<cc-horizontal-layout theme="padding" style="border: 1px solid #76B23B;">
  <cc-button>Cancel</cc-button>
  <cc-button theme="primary">Save</cc-button>
</cc-horizontal-layout>

Margin

<div style="border: 1px solid #333; border-radius: 8px;">
  <cc-horizontal-layout theme="margin">
    <cc-button>Cancel</cc-button>
    <cc-button theme="primary">Save</cc-button>
  </cc-horizontal-layout>
</div>

Margin && Padding

<div style="border: 1px solid #333; border-radius: 8px;">
  <cc-horizontal-layout theme="margin padding" style="border: 1px solid #76B23B;">
    <cc-button>Cancel</cc-button>
    <cc-button theme="primary">Save</cc-button>
  </cc-horizontal-layout>
</div>