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 { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ButtonGroup } from "@rhds/elements/react/rh-button-group/rh-button-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ButtonGroup>
    <Button variant="primary">Save</Button>
    <Button variant="secondary">Cancel</Button>
    <Button variant="tertiary">More</Button>
  </ButtonGroup>
);

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

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

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { ButtonGroup } from "@rhds/elements/react/rh-button-group/rh-button-group.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ButtonGroup>
    <Button variant="secondary" icon="edit" accessible-label="Edit" />
    <Button variant="secondary" icon="copy" accessible-label="Copy" />
    <Button variant="secondary" icon="undo" accessible-label="Undo" />
    <Button variant="secondary" icon="trash" accessible-label="Delete" />
  </ButtonGroup>
);