Button group

import "@rhds/elements/rh-button/rh-button.js";
import "@rhds/elements/rh-button-group/rh-button-group.js";

<rh-button-group>
  <rh-button variant="primary">Save</rh-button>
  <rh-button variant="secondary">Cancel</rh-button>
  <rh-button variant="tertiary">More</rh-button>
</rh-button-group>

import "@rhds/elements/rh-button/rh-button.js";
import "@rhds/elements/rh-button-group/rh-button-group.js";

<rh-button-group>
  <rh-button variant="primary">Save</rh-button>
  <rh-button variant="secondary">Cancel</rh-button>
  <rh-button variant="tertiary">More</rh-button>
</rh-button-group>

<rh-button-group>
  <rh-button variant="secondary" icon="edit" label="Edit"></rh-button>
  <rh-button variant="secondary" icon="copy" label="Copy"></rh-button>
  <rh-button variant="secondary" icon="undo" label="Undo"></rh-button>
  <rh-button variant="secondary" icon="trash" label="Delete"></rh-button>
</rh-button-group>

import "@rhds/elements/rh-button/rh-button.js";
import "@rhds/elements/rh-button-group/rh-button-group.js";

<rh-button-group orientation="vertical">
  <rh-button variant="primary">Save</rh-button>
  <rh-button variant="secondary">Cancel</rh-button>
  <rh-button variant="tertiary">More</rh-button>
</rh-button-group>

<rh-button-group orientation="vertical">
  <rh-button variant="secondary" icon="edit" label="Edit"></rh-button>
  <rh-button variant="secondary" icon="copy" label="Copy"></rh-button>
  <rh-button variant="secondary" icon="undo" label="Undo"></rh-button>
  <rh-button variant="secondary" icon="trash" label="Delete"></rh-button>
</rh-button-group>