# Button Group

### Basic Button Group

{% tabs %}
{% tab title="Basic Button Group" %}
![](/files/-Loi_Cc1qINfnBg0xG1U)

```markup
<div class="btn-group" 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>
```

{% endtab %}

{% tab title="Outlined Button Group" %}
![](/files/-Loi_Iv91RtTZExe_N_4)

```markup
<div class="btn-group" 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 %}

### Toolbar Button Group

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

```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 %}

{% tab title="Example 2" %}
![](/files/-LoibW2RV5MldnxYNF4e)

```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-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 mb-2">
        <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 %}

{% tab title="Example 3" %}
![](/files/-LoibbILgfBp_NUk8kMc)

```markup
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mb-2" 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 mb-2">
        <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 %}

### Nested Button Group

{% tabs %}
{% tab title="Basic" %}
![](/files/-Loibvuzz-4xZ3ddDGn_)

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

    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" 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 %}

{% tab title="Outline" %}
![](/files/-LoibzE7z0L0S3oYsUIu)

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

    <div class="btn-group" role="group">
        <button id="btnGroupDrop2" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
            <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 %}

### Button Group Sizes

{% tabs %}
{% tab title="Default Size" %}
![](/files/-LoicT7ZUbk2YvxcRZxC)

```markup
<div class="btn-group" 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>
```

{% endtab %}

{% tab title="Large Size" %}
![](/files/-LoicaKb3mFz5aCJxb50)

```markup
<div class="btn-group btn-group-lg" 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>
```

{% endtab %}

{% tab title="Small Size" %}
![](/files/-LoickCwLxZ8zzVibSlZ)

```markup
<div class="btn-group btn-group-sm" 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>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group

{% tabs %}
{% tab title="Basic" %}
![](/files/-Loid5Dm1fzyFB1svvcd)

```markup
<div class="btn-group-vertical" 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>
```

{% endtab %}

{% tab title="Outline" %}
![](/files/-Loid8QFzcOlX1C50wi4)

```markup
<div class="btn-group-vertical" 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 %}

### Vertical Nested Group Button

{% tabs %}
{% tab title="Basic" %}
![](/files/-Loidu0PumdBPKrg5NV9)

```markup
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
            <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 %}

{% tab title="Outline" %}
![](/files/-LoidwZe_cWZ5U-yErcp)

```markup
<div class="btn-group-vertical mb-2" role="group" aria-label="Button group with nested dropdown">
    <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">
        <button id="btnGroupDrop6" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" 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>
</div>
```

{% endtab %}
{% endtabs %}

### Vertical Button Group Sizes

{% tabs %}
{% tab title="Default" %}
![](/files/-LoieRyGDBKXTeLFDOyO)

```markup
<div class="btn-group-vertical" 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>
```

{% endtab %}

{% tab title="Large" %}
![](/files/-LoieUWFO_b-E00qegLN)

```markup
<div class="btn-group-vertical btn-group-lg" 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>
```

{% endtab %}

{% tab title="Small" %}
![](/files/-LoiegqeVIn8990mCAC-)

```markup
<div class="btn-group-vertical btn-group-sm" 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>
```

{% 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.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.