# Button Group

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FynfgZ0w6p4z92VYlFlh3%2Fimage.png?alt=media&#x26;token=8519487a-b71d-4e1e-9167-b0603f64ccc1" alt="" width="68"><figcaption><p>Button Group Element</p></figcaption></figure></div>

The **`Button Group`** element allows you to group multiple buttons together. It provides a way to visually organize related buttons and size them as a cohesive unit.

The image below shows examples of button groups:

* Button group with 4 buttons and the *Size* option set to small.
* Button group with 3 buttons and the *Size* option set to large.&#x20;
* Button group with the *Type* option set to vertical.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fw4W9jNFT6XzgQbPNBqgD%2Fimage.png?alt=media&#x26;token=a8f1bbbf-bb1a-4f53-b4a9-d1d4efff056b" alt=""><figcaption><p>Examples of Button Group elements</p></figcaption></figure>

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Size`

Set the size of the buttons to override the [Size setting](https://docs.zingy.ai/app-editor/page-editor/button#button-size) of individual buttons. If the value of this setting is Default, the button group is rendered based on the largest sized button in the group.

### `Type`

By default, a button group is rendered in horizontal orientation. You can also have the button vertically oriented by choosing the Vertical setting.

### `Popup Menu Direction`

When used in the composite [Popup Menu1](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style1) and [Popup Menu2](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style2) elements, you can specify the location where the menu opens when clicked.