# Button

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fl7BSTQ8oh57SUhZy9N62%2Fimage.png?alt=media&#x26;token=e3c03777-2964-4677-b316-73e06612b1ec" alt="" width="66"><figcaption><p>Button Element</p></figcaption></figure></div>

Use the **`Button`** element when you need the user to trigger an action on your page.&#x20;

This action can encompass a variety of tasks such as form submission or data processing.&#x20;

With [Page Flow](https://docs.zingy.ai/app-editor/page-flow), you can define the desired actions. If you're working with forms, there is already a pre-configured Submit button element available to conveniently submit your form. Additionally a pre-configured Reset button is also available to clear the contents of all the field inputs.

***

## Options

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

### `Button Content`

Specify what you want the button to say using this setting. You can enter some simple HTML code here. We also support [Font Awesome 6](https://fontawesome.com/v6/search?o=r\&m=free) icons.

### `Button Look`

Select from a pre-defined list of background and text colors for the button look. For any other customizations see [here](https://docs.zingy.ai/app-editor/page-editor/page-element-settings).

### `Button Size`

Select from a pre-defined list of sizes. For any other customizations see [here](https://docs.zingy.ai/app-editor/page-editor/page-element-settings).

### `Button Action`

This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-toggle`** attribute. The [Popup Menu Style1](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style2)  and [Menubar Popup Menu](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements use this by setting the value to ***`dropdown`***. You can also use this to control a [Collapsible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/collapsible-area) element by setting the value to ***`collapse`***.

### `Action Target`

This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-target`** attribute. The value is set to the Element ID of the element to be controlled. To find the Element ID see [here](https://docs.zingy.ai/app-editor/page-element-settings#advanced-tab).

{% hint style="info" %}
The Element ID needs to be prefixed with a # character. This is also known as ID selector syntax. For more information click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors).
{% endhint %}

### `Popup Menu Icon`

Enable this if you want a :arrow\_down\_small:arrow to appear next to the content to indicate that it will invoke a popup menu. The [Popup Menu Style1](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/popup-menu-style2)  and [Menubar Popup Menu](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements turn this setting on.