Button Set

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

Usage

Usage documentation for this component is coming soon. In the meantime, help us improve this documentation by letting us know how your team is using it in #team-design-systems (internal only).

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:

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

<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