<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 class="btn btn-secondary" type="button" data-busy-text="Processing...">Left</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Middle</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Right</button>
</div>
<abp-button-toolbar>
<abp-button-group class="me-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="me-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="me-2 btn-group" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">1</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">2</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">3</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">4</button>
</div>
<div class="me-2 btn-group" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">5</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">6</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">7</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">8</button>
</div>
</div>
<abp-button-group size="Large">
<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>
<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>
<abp-button-group size="Small">
<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 btn-group-lg" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Left</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Middle</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Right</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Left</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Middle</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Left</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Middle</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Right</button>
</div>
<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">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">1</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">2</button>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"> Dropdown link </a>
<a href="#" class="dropdown-item"> Dropdown link </a>
</div>
</div>
</div>
<abp-button-group direction="Vertical">
<abp-button button-type="Secondary">Button</abp-button>
<abp-button button-type="Secondary">Button</abp-button>
<abp-button button-type="Secondary">Button</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-vertical" role="group">
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Button</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Button</button>
<button class="btn btn-secondary" type="button" data-busy-text="Processing...">Button</button>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"> Dropdown link </a>
<a href="#" class="dropdown-item"> Dropdown link </a>
</div>
</div>
</div>