# Button Group

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/button-group/)

## Button Group

Creates a group of buttons or inputs. The group can be vertically aligned, and different sizes can be specified.

### Bootstrap Documentation

<https://getbootstrap.com/docs/5.3/components/button-group>

### Available Properties:

* `vertical`: Whether to render the button group vertically. (default: false)
* `size`: The size of the button group (sm | md | lg). Defaults to `md`.
* `aria_label`: The aria-label attribute of the button group.
* `toolbar`: Whether to render the button group as a toolbar. (default: false)
* `toolbar_aria_label`: The aria-label attribute of the toolbar.
* `items`: An array of buttons or inputs.

### Available Slots:

* `content`: The content for the button.

### Examples

**Example #1:** Horizontal Button Group

```twig
{% include 'radix:button-group' with {
  size: 'lg',
  items: [
    [
      {html_tag: 'button', color: 'primary', content: 'Left'},
      {html_tag: 'button', color: 'primary', content: 'Middle'},
      {html_tag: 'button', color: 'primary', content: 'Right'},
    ],
  ]œ
} %}
```

**Example #2**: Vertical Input Button Group

```twig
{% include 'radix:button-group' with {
  vertical: true,
  items: [
      [
        {
          type: 'input',
          input_type: 'radio',
          label: 'First Input',
          remove_wrapper: true,
          toggle: true,
          toggle_variant: 'outline-danger',
          id: 'first-input',
          name: 'vbtn-radio',
          checked: true,
        },
        {
          type: 'input',
          input_type: 'radio',
          label: 'Second Input',
          remove_wrapper: true,
          toggle: true,
          toggle_variant: 'outline-danger',
          id: 'second-input',
          name: 'vbtn-radio'
        },
        {
          type: 'input',
          input_type: 'radio',
          label: 'Third Input',
          remove_wrapper: true,
          toggle: true,
          toggle_variant: 'outline-danger',
          id: 'third-input',
          name: 'vbtn-radio'
        },
      ],
  ]
} %}
```

These examples represent a horizontal and vertical button group where each item array creates a group of buttons. Please adjust as necessary.


---

# 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.trydrupal.com/radix/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.