Button group

Group a series of buttons together on a single line or stack them in a vertical column.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

The button group HTML markup can be simplified and made more dry by adding the button text to an array, and iterating over it e.g.

Astro file

---
const buttons: Button[] = [{ text: 'Left' }, { text: 'Center' }, { text: 'Right' }];
export interface Button {
  text: string;
}
---

<div class="btn-group" role="group" aria-label="Basic example">
  {
    buttons.map((button) => (
      <button type="button" class="btn btn-primary">
        {button.text}
      </button>
    ))
  }
</div>