ButtonGroup

Basic

<c-bs-button-group>
  <c-bs-button variant="primary">Left</c-bs-button>
  <c-bs-button variant="primary">Middle</c-bs-button>
  <c-bs-button variant="primary">Right</c-bs-button>
</c-bs-button-group>

Preview:


Mixed Styles

<c-bs-button-group>
  <c-bs-button variant="danger">Danger</c-bs-button>
  <c-bs-button variant="warning">Warning</c-bs-button>
  <c-bs-button variant="success">Success</c-bs-button>
</c-bs-button-group>

Preview:


Checkbox Buttons

<c-bs-button-group>
  <c-bs-toggle-button c-attrs="{'id': 'btncheck1'}">Checkbox 1</c-bs-toggle-button>
  <c-bs-toggle-button c-attrs="{'id': 'btncheck2'}">Checkbox 2</c-bs-toggle-button>
  <c-bs-toggle-button c-attrs="{'id': 'btncheck3'}">Checkbox 3</c-bs-toggle-button>
</c-bs-button-group>

Preview:


Radio Buttons

<c-bs-button-group>
  <c-bs-toggle-button type="radio" name="btnradio" c-checked="True" c-attrs="{'id': 'btnradio1'}">Radio 1</c-bs-toggle-button>
  <c-bs-toggle-button type="radio" name="btnradio" c-attrs="{'id': 'btnradio2'}">Radio 2</c-bs-toggle-button>
  <c-bs-toggle-button type="radio" name="btnradio" c-attrs="{'id': 'btnradio3'}">Radio 3</c-bs-toggle-button>
</c-bs-button-group>

Preview:


Large

<c-bs-button-group size="lg">
  <c-bs-button variant="primary" c-outline="True">Left</c-bs-button>
  <c-bs-button variant="primary" c-outline="True">Middle</c-bs-button>
  <c-bs-button variant="primary" c-outline="True">Right</c-bs-button>
</c-bs-button-group>

Preview:


Small

<c-bs-button-group size="sm">
  <c-bs-button variant="primary" c-outline="True">Left</c-bs-button>
  <c-bs-button variant="primary" c-outline="True">Middle</c-bs-button>
  <c-bs-button variant="primary" c-outline="True">Right</c-bs-button>
</c-bs-button-group>

Preview:


Vertical

<c-bs-button-group c-vertical="True">
  <c-bs-button variant="primary">Button</c-bs-button>
  <c-bs-button variant="primary">Button</c-bs-button>
  <c-bs-button variant="primary">Button</c-bs-button>
  <c-bs-button variant="primary">Button</c-bs-button>
</c-bs-button-group>

Preview:


Toolbar Basic

<c-bs-button-toolbar>
  <c-bs-button-group c-attrs="{'class': 'me-2'}">
    <c-bs-button variant="primary">1</c-bs-button>
    <c-bs-button variant="primary">2</c-bs-button>
    <c-bs-button variant="primary">3</c-bs-button>
    <c-bs-button variant="primary">4</c-bs-button>
  </c-bs-button-group>
  <c-bs-button-group c-attrs="{'class': 'me-2'}">
    <c-bs-button variant="secondary">5</c-bs-button>
    <c-bs-button variant="secondary">6</c-bs-button>
    <c-bs-button variant="secondary">7</c-bs-button>
  </c-bs-button-group>
  <c-bs-button-group>
    <c-bs-button variant="info">8</c-bs-button>
  </c-bs-button-group>
</c-bs-button-toolbar>

Preview: