Button groups

Based on Bootstrap Button group.

Basic example


<abp-button-group>
    <abp-button button-type="Secondary">Left</abp-button>
    <abp-button button-type="Secondary">Middle</abp-button>
    <abp-button button-type="Secondary">Right</abp-button>
</abp-button-group>


<div class="btn-group" role="group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Button toolbar


        <abp-button-toolbar>
            <abp-button-group class="mr-2">
                <abp-button button-type="Secondary">1</abp-button>
                <abp-button button-type="Secondary">2</abp-button>
                <abp-button button-type="Secondary">3</abp-button>
                <abp-button button-type="Secondary">4</abp-button>
            </abp-button-group>
            <abp-button-group class="mr-2">
                <abp-button button-type="Secondary">5</abp-button>
                <abp-button button-type="Secondary">6</abp-button>
                <abp-button button-type="Secondary">7</abp-button>
            </abp-button-group>
            <abp-button-group>
                <abp-button button-type="Secondary">8</abp-button>
            </abp-button-group>
        </abp-button-toolbar>


<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Sizing






<abp-button-group size="Large">
    ...
</abp-button-group>

<abp-button-group>
    ...
</abp-button-group>

<abp-button-group size="Small">
    ...
</abp-button-group>


<div class="btn-group btn-group-lg" role="group">
    ...
</div>

<div class="btn-group" role="group">
    ...
</div>

<div class="btn-group btn-group-sm" role="group">
    ...
</div>

Nesting

Dropdown link Dropdown link 

<abp-button-group>
    <abp-button button-type="Secondary">1</abp-button>
    <abp-button button-type="Secondary">2</abp-button>
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" text="Dropdown" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
            <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-button-group>


<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Vertical variation

Dropdown link Dropdown link
Dropdown link Dropdown link 

<abp-button-group direction="Vertical">
    ...
</abp-button-group>


<div class="btn-group-vertical">
  ...
</div>