# ButtonGroup

The Bootstrap `button group` component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.

## `bs_btn_group(*args, &block)`

Returns a bootstrap button-group containing content specified by a block. Also the button\_group is customizable with the following options.

**Optional options**

* `size` - Use `:sm` (small), `:md` (medium), `:lg` (large) to change size of the button group. The default is `nil`.
* `toolbar` - Set `true` for using button toolbar instead of button group
* `label` - Expects a String. Adding label to attributes `aria-label`
* `vertical` - Expects `true` or `false`. By default is set as `true`. This parameter determines whether the button group should align vertically
* Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding button group div.

## Examples

### Example 1:

```ruby
bs_btn_group label: "Basic example" do
  bs_btn "Left", variant: :secondary
  bs_btn "Middle", variant: :secondary
  bs_btn "Right", variant: :secondary
end
```

returns

```markup
<div class="btn-group" role="group" aria-label="Basic example">
  <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>
```

### Example 2: Using size

```ruby
bs_btn_group size: :lg, label: "..." do ... end
bs_btn_group label: "..." do ... end
bs_btn_group size: :sm, label: "..." do ... end
```

returns

```markup
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
```

### Example 3: Button Toolbar

```ruby
bs_btn_group toolbar: true, label: "Toolbar with button groups" do
  bs_btn_group label: "First group" do
    bs_btn "1", variant: :secondary
    bs_btn "2", variant: :secondary
    bs_btn "3", variant: :secondary
  end
  bs_btn_group label: "Second group" do
    bs_btn "1", variant: :secondary
    bs_btn "2", variant: :secondary
    bs_btn "3", variant: :secondary
  end
end
```

returns

```markup
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First 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>
  </div>
  <div class="btn-group" role="group" aria-label="Second 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>
```


---

# 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.matestack.io/matestack-ui-bootstrap/2.1/api/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.