Button group

Overview

Style

Guidelines

Code

Accessibility

Demos

Importing

Usage

rh-button-group

Importing

Usage

rh-button-group

Importing

Add rh-button-group to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-button-group/rh-button-group.js';
</script>

Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage

<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>

<script type="module">
  import "@rhds/elements/rh-button/rh-button.js";
  import "@rhds/elements/rh-button-group/rh-button-group.js";
</script>

Copy to Clipboard Wrap lines

rh-button-group

A button group visually organizes multiple related buttons into a single collection.

Slots 1

Slot Name	Summary	Description
`[default]`		Place `<rh-button>` elements or native `<button>` elements here to organize them into a button group. Note: [default] unnamed slots do not have a slot="name" attribute.