# Button Group

To use Button Group, first import `SharedModule`in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Button Group

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuOvieB1MJXbZ4G85bt)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group mr-2 mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuOvxLvPjbk3uUvgtID)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group-vertical mr-2 mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

<div class="btn-group-vertical mb-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}

### Toolbar Button Group

{% tabs %}
{% tab title="Example 1" %}
![](/files/-LuOxA8KQT9GUsOFzrmc)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2 mb-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group mr-2 mb-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Third group">
    <button type="button" class="btn btn-primary">8</button>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 2" %}
![](/files/-LuOxFFNs_5D-i690XsS)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
    <button type="button" class="btn btn-outline-primary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example"
           aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Example 3" %}
![](/files/-LuOxJ6R8H3_--sr-R34)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-toolbar justify-content-between" role="toolbar">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example"
           aria-label="Input group example"
           aria-describedby="btnGroupAddon2">
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Button Group sizing

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuP0nOKEb2T0Wtid92C)
{% endtab %}

{% tab title="HTML" %}

```markup
<div>
  <div class="btn-group btn-group-lg mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>

<div>
  <div class="btn-group mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>

<div>
  <div class="btn-group btn-group-sm mr-2 mb-2" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group sizing

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuP-fkDruXS14HppClf)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group-vertical btn-group-lg mr-2 mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>

<div class="btn-group-vertical mr-2 mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>

<div class="btn-group-vertical btn-group-sm mb-2" role="group">
  <button type="button" class="btn btn-outline-primary">Top</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Bottom</button>
</div>
```

{% endtab %}
{% endtabs %}

### Nesting Button Group

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuP05eOgwZu-McgHgf_)
{% endtab %}

{% tab title="HTML" %}

```markup
<div class="btn-group mr-2 mb-2" role="group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop1" type="button" class="btn btn-primary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Nesting Button Group

{% tabs %}
{% tab title="Preview" %}
![](/files/-LuP00loK9D4geKWDYHW)
{% endtab %}

{% tab title="Second Tab" %}

```markup
<div class="btn-group-vertical mb-2" role="group">
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <button type="button" class="btn btn-outline-secondary">Button</button>

  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop6" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop6">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <button type="button" class="btn btn-outline-secondary">Button</button>
  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop7" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop7">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group" ngbDropdown>
    <button id="btnGroupDrop8" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
      Dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="btnGroupDrop8">
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
</div>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/components/button-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.