Button Set

Provides consistent layout and spacing for a set of buttons.

Use a button set to ensure a consistent layout when using multiple buttons in a single row.

Usage

More detailed examples and guidance around button alignment, grouping, and organization can be found in the button organization pattern documentation.

How to use this component

The basic invocation requires two or more buttons to be provided as children:

Cancel

<Hds::ButtonSet>
  <Hds::Button @text="Submit" type="submit" />
  <Hds::Button @text="Cancel" @color="secondary" @href="https://hashicorp.com" />
</Hds::ButtonSet>

Equal width buttons

If you want to have buttons with equal width, apply a width (via inline style or CSS class) to the ButtonSet container and the argument @isFullWidth=true to the Button components:

Cancel

<Hds::ButtonSet {{style width="15rem"}}>
  <Hds::Button @text="Save" @isFullWidth={{true}} />
  <Hds::Button @text="Cancel" @color="secondary" @href="https://hashicorp.com" @isFullWidth={{true}} />
</Hds::ButtonSet>

With loading state

This technique is useful if you need to show a loading state, to avoid the resizing and shifting of the buttons:

<Hds::ButtonSet {{style width="15rem"}}>
  <Hds::Button
    @icon={{if this.isLoading "loading"}}
    @text={{if this.isLoading "Loading" "Save"}}
    @isFullWidth={{true}}
    {{on "click" this.toggleIsLoading}}
  />
  <Hds::Button
    @text="Cancel"
    @color="secondary"
    @isFullWidth={{true}}
    {{on "click" this.cancelLoading}}
  />
</Hds::ButtonSet>

Component API

…attributes

This component supports use of ...attributes.

On this page: