# Button Toolbar

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FIgVL0xcigPAOaFsWNopA%2Fimage.png?alt=media&#x26;token=267a99f5-f007-4d4d-8c2e-08d6af4cdb69" alt="" width="71"><figcaption><p>Button Toolbar Element</p></figcaption></figure></div>

The **`Button Toolbar`** element allows you to group multiple [Button Group](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button-group) and [Input Group](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input-group) elements horizontally. There can be more than one button group and/or input groups and the button groups can have any number of buttons.

The example image below shows a button toolbar with:

* [Input Group](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input-group) with [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element.
* [Button Group](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button-group) with three [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) elements.
* [Input Group](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input-group) with [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown) element.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FVCXcJgwt48tH9Fx614rn%2Fimage.png?alt=media&#x26;token=1b6246f3-d739-437c-b506-72bfe949a8db" alt=""><figcaption><p>A Button Toolbar with Input groups and Button Group</p></figcaption></figure>

It makes it easy to create visually appealing and functional toolbars for your Zingy app.

To control the horizontal alignment use the Button Toolbar element inside a [Flexible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/flexible-area) and use the [Horizontal Align](https://docs.zingy.ai/app-editor/page-editor/flexible-area#horizontal-align) setting.&#x20;
