Button group

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

Basic example

Wrap a series of buttons with <xref outputclass="btn-*"> in a <div outputclass="btn-group">

Left Middle Right

<button-group>
  <button href="#">Left</button>
  <button href="#">Middle</button>
  <button href="#">Right</button>
</button-group>

<div outputclass="btn-group">
  <xref outputclass="btn-primary" href="#">Left</xref>
  <xref outputclass="btn-primary" href="#">Middle</xref>
  <xref outputclass="btn-primary" href="#">Right</xref>
</div>

Mixed styles

Left Middle Right

<button-group>
  <button color="danger" href="#">Left</button>
  <button color="warning" href="#">Middle</button>
  <button color="success" href="#">Right</button>
</button-group>

<div outputclass="btn-group">
  <xref outputclass="btn-danger" href="#">Left</xref>
  <xref outputclass="btn-warning" href="#">Middle</xref>
  <xref outputclass="btn-success" href="#">Right</xref>
</div>

Outlined styles

Left Middle Right

<button-group>
  <button outline="yes" href="#">Left</button>
  <button outline="yes" href="#">Middle</button>
  <button outline="yes" href="#">Right</button>
</button-group>

<div outputclass="btn-group">
  <xref outputclass="btn-outline-primary" href="#">Left</xref>
  <xref outputclass="btn-outline-primary" href="#">Middle</xref>
  <xref outputclass="btn-outline-primary" href="#">Right</xref>
</div>

Button toolbar

Combine sets of button groups into button toolbars for more complex components.

<bodydiv outputclass="btn-toolbar">
  <button-group outputclass="me-2">
    <button href="#">1</button>
    <button href="#">2</button>
    <button href="#">3</button>
    <button href="#">4</button>
  </button-group>
  <button-group outputclass="me-2">
    <button color="secondary" href="#">5</button>
    <button color="secondary" href="#">6</button>
    <button color="secondary" href="#">7</button>
  </button-group>
  <button-group outputclass="me-2">
    <button color="info" href="#">8</button>
  </button-group>
</bodydiv>

<div outputclass="btn-toolbar">
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-primary" href="#">1</xref>
    <xref outputclass="btn-primary" href="#">2</xref>
    <xref outputclass="btn-primary" href="#">3</xref>
    <xref outputclass="btn-primary" href="#">4</xref>
  </div>
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-secondary" href="#">5</xref>
    <xref outputclass="btn-secondary" href="#">6</xref>
    <xref outputclass="btn-secondary" href="#">7</xref>
  </div>
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-info" href="#">8</xref>
  </div>
</div>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

Top Middle Bottom

<button-group vertical="yes">
  <button href="#">Top</button>
  <button href="#">Middle</button>
  <button href="#">Bottom</button>
</button-group>

<div outputclass="btn-group-vertical">
  <xref outputclass="btn-primary" href="#">Top</xref>
  <xref outputclass="btn-primary" href="#">Middle</xref>
  <xref outputclass="btn-primary" href="#">Bottom</xref>
</div>